fix: extend strokeLinecap to support butt

Author: vydimitrov

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.7](2022-01-29)
+
+### Fix
+
+- Extend strokeLinecap to support "butt" option
+
 ## [3.0.6](2022-01-13)
 
 ### Fix

packages/mobile/README.md

@@ -78,7 +78,7 @@ const {
 | size                    | number                                                                                                            | 180         | Width and height of the SVG element                                                                                                                                                           |
 | strokeWidth             | number                                                                                                            | 12          | Path stroke width                                                                                                                                                                             |
 | trailStrokeWidth        | number                                                                                                            | strokeWidth | Trail stroke width                                                                                                                                                                            |
-| strokeLinecap           | round \| square                                                                                                   | round       | Path stroke line cap                                                                                                                                                                          |
+| strokeLinecap           | round \| square \| butt                                                                                           | round       | Path stroke line cap                                                                                                                                                                          |
 | rotation                | clockwise \| counterclockwise                                                                                     | clockwise   | Progress path rotation direction                                                                                                                                                              |
 | trailColor              | string                                                                                                            | #d9d9d9     | Circle trail color - takes any valid color format                                                                                                                                             |
 | isSmoothColorTransition | boolean                                                                                                           | true        | Indicates if the colors should smoothly transition to the next color                                                                                                                          |

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-countdown-circle-timer",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Lightweight React Native countdown timer component with color and progress animation based on SVG",
   "main": "./lib/index.js",
   "source": "./src/index.ts",

packages/mobile/src/types.ts

@@ -46,7 +46,7 @@ export type Props = {
   /** Trail stroke width */
   trailStrokeWidth?: number
   /** Path stroke line cap. Default: "round" */
-  strokeLinecap?: 'round' | 'square'
+  strokeLinecap?: 'round' | 'square' | 'butt'
   /** Progress path rotation direction. Default: "clockwise" */
   rotation?: 'clockwise' | 'counterclockwise'
   /** Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.). Default: #d9d9d9 */

packages/shared/src/types.ts

@@ -46,7 +46,7 @@ export type Props = {
   /** Trail stroke width */
   trailStrokeWidth?: number
   /** Path stroke line cap. Default: "round" */
-  strokeLinecap?: 'round' | 'square'
+  strokeLinecap?: 'round' | 'square' | 'butt'
   /** Progress path rotation direction. Default: "clockwise" */
   rotation?: 'clockwise' | 'counterclockwise'
   /** Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.). Default: #d9d9d9 */

packages/web/README.md

@@ -74,7 +74,7 @@ const {
 | size                    | number                                                                                                            | 180         | Width and height of the SVG element                                                                                                                                                           |
 | strokeWidth             | number                                                                                                            | 12          | Path stroke width                                                                                                                                                                             |
 | trailStrokeWidth        | number                                                                                                            | strokeWidth | Trail stroke width                                                                                                                                                                            |
-| strokeLinecap           | round \| square                                                                                                   | round       | Path stroke line cap                                                                                                                                                                          |
+| strokeLinecap           | round \| square \| butt                                                                                           | round       | Path stroke line cap                                                                                                                                                                          |
 | rotation                | clockwise \| counterclockwise                                                                                     | clockwise   | Progress path rotation direction                                                                                                                                                              |
 | trailColor              | string                                                                                                            | #d9d9d9     | Circle trail color - takes any valid color format                                                                                                                                             |
 | isSmoothColorTransition | boolean                                                                                                           | true        | Indicates if the colors should smoothly transition to the next color                                                                                                                          |

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-countdown-circle-timer",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
   "main": "./lib/index.js",
   "module": "./lib/index.module.js",

packages/web/src/types.ts

@@ -46,7 +46,7 @@ export type Props = {
   /** Trail stroke width */
   trailStrokeWidth?: number
   /** Path stroke line cap. Default: "round" */
-  strokeLinecap?: 'round' | 'square'
+  strokeLinecap?: 'round' | 'square' | 'butt'
   /** Progress path rotation direction. Default: "clockwise" */
   rotation?: 'clockwise' | 'counterclockwise'
   /** Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.). Default: #d9d9d9 */