react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
28 lines (27 loc) • 2.88 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
export const ProgressCircle = ({ value, max = 100, variant = 'primary', size = 'md', style = 'filled', showLabel = false, showPercentage = true, label, isAnimated = false, strokeWidth, textColor, className, ...props }) => {
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
const radius = 45; // Reduced from 50 to account for stroke width
const circumference = 2 * Math.PI * radius;
const strokeDasharray = circumference;
const strokeDashoffset = circumference - (percentage / 100) * circumference;
// Calculate stroke width based on size if not provided
const getStrokeWidth = () => {
if (strokeWidth)
return Math.min(strokeWidth, 8); // Cap at 8 to prevent clipping
const sizeMap = {
xs: 1.5,
sm: 2,
md: 3,
lg: 4,
xl: 5
};
return sizeMap[size];
};
const progressCircleClasses = cn('progress-circle', `progress-circle--${variant}`, `progress-circle--${size}`, `progress-circle--${style}`, isAnimated && 'progress-circle--animated', className);
const labelClasses = cn('progress-circle__label', showLabel && 'progress-circle__label--visible');
const percentageClasses = cn('progress-circle__percentage', showPercentage && 'progress-circle__percentage--visible');
return (_jsx("div", { className: progressCircleClasses, ...props, children: _jsxs("div", { className: "progress-circle__container", children: [_jsxs("svg", { className: "progress-circle__svg", viewBox: "0 0 100 100", role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, style: { transform: 'rotate(-90deg)' }, children: [_jsx("circle", { className: "progress-circle__background", cx: "50", cy: "50", r: radius, fill: "none", strokeWidth: getStrokeWidth() }), style === 'filled' ? (_jsx("path", { className: "progress-circle__progress", d: `M 50,50 L 50,0 A 50,50 0 ${percentage > 50 ? 1 : 0},1 ${50 + 50 * Math.cos((percentage * 3.6 - 90) * Math.PI / 180)},${50 + 50 * Math.sin((percentage * 3.6 - 90) * Math.PI / 180)} Z`, fill: "currentColor" })) : (_jsx("circle", { className: "progress-circle__progress", cx: "50", cy: "50", r: radius, fill: "none", stroke: "currentColor", strokeWidth: getStrokeWidth(), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, strokeLinecap: "round" }))] }), _jsxs("div", { className: "progress-circle__content", children: [showPercentage && (_jsxs("div", { className: percentageClasses, style: textColor ? { color: textColor } : undefined, children: [Math.round(percentage), "%"] })), showLabel && label && (_jsx("div", { className: labelClasses, style: textColor ? { color: textColor } : undefined, children: label }))] })] }) }));
};