Math Curve Progress

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5import { ErrorBoundary } from '@/components/ErrorBoundary'
6import {
7  buildPath,
8  getPoint,
9  getAngle,
10  type ProgressCurveKey,
11} from '@/lib/math-curves'
12 
13const mathCurveProgressVariants = cva('', {
14  variants: {
15    size: {
16      sm: 'w-12 h-12',
17      md: 'w-16 h-16',
18      lg: 'w-24 h-24',
19    },
20  },
21  defaultVariants: {
22    size: 'md',
23  },
24})
25 
26export interface MathCurveProgressProps
27  extends React.SVGAttributes<SVGSVGElement>,
28    VariantProps<typeof mathCurveProgressVariants> {
29  value: number
30  curve?: ProgressCurveKey
31  showValue?: boolean
32  trackColor?: string
33  fillColor?: string
34  strokeWidth?: number
35}
36 
37const MathCurveProgress = React.forwardRef<SVGSVGElement, MathCurveProgressProps>(
38  (
39    {
40      className,
41      size,
42      value,
43      curve = 'spiral',
44      showValue = false,
45      trackColor,
46      fillColor,
47      strokeWidth = 4,
48      ...props
49    },
50    ref
51  ) => {
52    const clampedValue = Math.min(100, Math.max(0, value))
53    const progress = clampedValue / 100
54 
55    const trackPath = React.useMemo(() => buildPath(curve, 1.0), [curve])
56    const headPoint = React.useMemo(() => getPoint(curve, progress), [curve, progress])
57    const headAngle = React.useMemo(() => getAngle(curve, progress), [curve, progress])
58    const HEAD_SIZE = 8
59 
60    const resolvedTrackStroke = trackColor ?? 'currentColor'
61    const resolvedFillColor = fillColor ?? 'hsl(var(--primary))'
62 
63    return (
64      <ErrorBoundary>
65        <svg
66          ref={ref}
67          viewBox="0 0 100 100"
68          xmlns="http://www.w3.org/2000/svg"
69          role="progressbar"
70          aria-valuenow={clampedValue}
71          aria-valuemin={0}
72          aria-valuemax={100}
73          aria-label={`${Math.round(clampedValue)}% progress`}
74          className={cn(mathCurveProgressVariants({ size }), className)}
75          {...props}
76        >
77          {/* Track layer */}
78          <path
79            d={trackPath}
80            fill="none"
81            stroke={resolvedTrackStroke}
82            strokeWidth={strokeWidth}
83            strokeOpacity={0.2}
84            strokeLinecap="square"
85            strokeLinejoin="miter"
86          />
87          {/* Head square — CSS transition for smooth value-driven movement */}
88          <rect
89            width={HEAD_SIZE}
90            height={HEAD_SIZE}
91// … truncated