'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { Progress as ProgressPrimitive } from 'radix-ui'; function Progress({ className, indicatorClassName, value, ...props }: React.ComponentProps & { indicatorClassName?: string; }) { return ( ); } function ProgressCircle({ className, indicatorClassName, trackClassName, value = 0, size = 48, strokeWidth = 4, children, ...props }: React.ComponentProps<'div'> & { /** * Progress value from 0 to 100 */ value?: number; /** * Size of the circle in pixels */ size?: number; /** * Width of the progress stroke */ strokeWidth?: number; /** * Additional className for the progress stroke */ indicatorClassName?: string; /** * Additional className for the progress track */ trackClassName?: string; /** * Content to display in the center of the circle */ children?: React.ReactNode; }) { const radius = (size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const offset = circumference - (value / 100) * circumference; return (

{children && (

{children}

)}

); } function ProgressRadial({ className, value = 0, size = 120, strokeWidth = 8, startAngle = -90, endAngle = 90, showLabel = false, trackClassName, indicatorClassName, children, ...props }: React.ComponentProps<'div'> & { /** * Progress value from 0 to 100 */ value?: number; /** * Size of the radial in pixels */ size?: number; /** * Width of the progress stroke */ strokeWidth?: number; /** * Start angle in degrees */ startAngle?: number; /** * Additional className for the progress stroke */ indicatorClassName?: string; /** * Additional className for the progress track */ trackClassName?: string; /** * End angle in degrees */ endAngle?: number; /** * Whether to show percentage label */ showLabel?: boolean; /** * Custom content to display */ children?: React.ReactNode; }) { const radius = (size - strokeWidth) / 2; const angleRange = endAngle - startAngle; const progressAngle = (value / 100) * angleRange; const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const startX = size / 2 + radius * Math.cos(toRadians(startAngle)); const startY = size / 2 + radius * Math.sin(toRadians(startAngle)); const endX = size / 2 + radius * Math.cos(toRadians(startAngle + progressAngle)); const endY = size / 2 + radius * Math.sin(toRadians(startAngle + progressAngle)); const largeArc = progressAngle > 180 ? 1 : 0; const pathData = ['M', startX, startY, 'A', radius, radius, 0, largeArc, 1, endX, endY].join(' '); return (

{(showLabel || children) && (

{children || {value}%}

)}

); } export { Progress, ProgressCircle, ProgressRadial };