From d8cd201cf0a405269b7f826f71bb831ad4052985 Mon Sep 17 00:00:00 2001
From: Gregoire Stevenard <greg@vidday.com>
Date: Wed, 11 Jun 2025 10:55:53 -0600
Subject: [PATCH] update component to fix types

---
 package-lock.json        |  1 +
 src/CircularProgress.tsx | 13 +++++++------
 src/CircularTrack.tsx    | 19 +++++++++++--------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2183361..f63af82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
 	"requires": true,
 	"packages": {
 		"": {
+			"name": "react-circular-input",
 			"version": "0.2.4",
 			"license": "MIT",
 			"devDependencies": {
diff --git a/src/CircularProgress.tsx b/src/CircularProgress.tsx
index 92478c4..c572ca8 100644
--- a/src/CircularProgress.tsx
+++ b/src/CircularProgress.tsx
@@ -11,16 +11,17 @@ type Props = JSX.IntrinsicElements['circle'] &
 		transform?: undefined
 	}
 
-const defaultProps = {
-	stroke: '#3D99FF',
-}
+// const defaultProps = {
+// 	stroke: '#3D99FF',
+// }
 
-export const CircularProgress = (props: Props) => {
+export const CircularProgress = ({ stroke =  '#3D99FF', ...rest}: Props) => {
 	const { value, radius, center } = useCircularInputContext()
 	const innerCircumference = DEG_360_IN_RAD * radius
 	return (
 		<CircularTrack
-			{...props}
+			stroke={stroke}
+			{...rest}
 			strokeDasharray={innerCircumference}
 			strokeDashoffset={innerCircumference * (1 - value)}
 			transform={`rotate(-90 ${center.x} ${center.y})`}
@@ -28,4 +29,4 @@ export const CircularProgress = (props: Props) => {
 	)
 }
 
-CircularProgress.defaultProps = defaultProps
+// CircularProgress.defaultProps = defaultProps
diff --git a/src/CircularTrack.tsx b/src/CircularTrack.tsx
index b9d4efa..b3b64a8 100644
--- a/src/CircularTrack.tsx
+++ b/src/CircularTrack.tsx
@@ -10,20 +10,23 @@ export type Props = JSX.IntrinsicElements['circle'] & {
 	r?: undefined
 }
 
-export const defaultProps = {
-	stroke: '#CEE0F5',
-	fill: 'none',
-	strokeWidth: 20,
-	strokeLinecap: 'round',
-}
+// export const defaultProps = {
+// 	stroke: '#CEE0F5',
+// 	fill: 'none',
+// 	strokeWidth: 20,
+// 	strokeLinecap: 'round',
+// }
 
-export const CircularTrack = ({ strokeWidth, ...props }: Props) => {
+export const CircularTrack = ({ stroke = '#CEE0F5', fill = 'none', strokeWidth = 20, strokeLinecap = 'round', ...props }: Props) => {
 	const { radius, center } = useCircularInputContext()
 	const ref = useRef<SVGCircleElement | null>(null)
 	useCircularDrag(ref)
 	return (
 		<circle
+			stroke={stroke}
+			fill={fill}
 			strokeWidth={strokeWidth}
+			strokeLinecap={strokeLinecap}
 			{...props}
 			ref={ref}
 			cx={center.x}
@@ -33,4 +36,4 @@ export const CircularTrack = ({ strokeWidth, ...props }: Props) => {
 	)
 }
 
-CircularTrack.defaultProps = defaultProps
+// CircularTrack.defaultProps = defaultProps