related-ui-components 2.5.8 → 2.5.9

package/lib/module/app.js

@@ -64,8 +64,11 @@ const App = () => {
             }), /*#__PURE__*/_jsx(SafeAreaView, {
               style: styles.appContainer,
               children: /*#__PURE__*/_jsx(CircularProgressBar, {
-                progress: 50,
-                strokeWidth: 10,
+                variant: "steps",
+                totalSteps: 4,
+                currentStep: 4,
+                size: 43,
+                strokeWidth: 2,
                 progressColor: "#9CA0A3"
               })
             })]

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","strokeWidth","progressColor","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACgB;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAUrE,SAASC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC/D,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAChDyB,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAqByB,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM8B,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EACD,oBACEnB,IAAA,CAAAI,SAAA;IAAAmB,QAAA,eACAvB,IAAA,CAACF,gBAAgB;MAAAyB,QAAA,eACfvB,IAAA,CAACR,sBAAsB;QAACgC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzCvB,IAAA,CAACN,eAAe;UAACgB,KAAK,EAAEjB,UAAW;UAAA8B,QAAA,eACjCrB,KAAA,CAACL,wBAAwB;YAAA0B,QAAA,gBACvBvB,IAAA,CAACT,SAAS;cAACmC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC1B,IAAA,CAACX,YAAY;cAACmC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eA+CvCvB,IAAA,CAACJ,mBAAmB;gBAACoB,QAAQ,EAAE,EAAG;gBAACa,WAAW,EAAE,EAAG;gBAACC,aAAa,EAAC;cAAS,CAAsB;YAAC,CAEtF,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACP;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMH,MAAM,GAAGrC,UAAU,CAACyC,MAAM,CAAC;EAC/BH,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPO,eAAe,EAAC,MAAM;IACtBC,cAAc,EAAE,QAAQ,CAAE;EAC5B;AACF,CAAC,CAAC;AAEF,eAAexB,GAAG","ignoreList":[]}
+{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","variant","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACgB;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAUrE,SAASC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC/D,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAChDyB,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAqByB,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM8B,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EACD,oBACEnB,IAAA,CAAAI,SAAA;IAAAmB,QAAA,eACAvB,IAAA,CAACF,gBAAgB;MAAAyB,QAAA,eACfvB,IAAA,CAACR,sBAAsB;QAACgC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzCvB,IAAA,CAACN,eAAe;UAACgB,KAAK,EAAEjB,UAAW;UAAA8B,QAAA,eACjCrB,KAAA,CAACL,wBAAwB;YAAA0B,QAAA,gBACvBvB,IAAA,CAACT,SAAS;cAACmC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC1B,IAAA,CAACX,YAAY;cAACmC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eA+CvCvB,IAAA,CAACJ,mBAAmB;gBAACiC,OAAO,EAAC,OAAO;gBAACC,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,EAAG;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAS,CAAsB;YAAC,CAEjI,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACP;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMP,MAAM,GAAGrC,UAAU,CAAC6C,MAAM,CAAC;EAC/BP,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPW,eAAe,EAAC,MAAM;IACtBC,cAAc,EAAE,QAAQ,CAAE;EAC5B;AACF,CAAC,CAAC;AAEF,eAAe5B,GAAG","ignoreList":[]}

package/lib/module/components/ProgressBar/CircularProgressBar.js

@@ -1,15 +1,13 @@
 "use strict";
 
 import React, { useEffect } from "react";
-import { Canvas, matchFont, Path, Shadow, Skia, Text, useFont } from "@shopify/react-native-skia";
+import { Canvas, matchFont, Path, Shadow, Skia, Text, useFont, DashPathEffect } from "@shopify/react-native-skia";
 import { useSharedValue, withTiming, useDerivedValue, Easing } from "react-native-reanimated";
 import { Platform } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CircularProgressBar = ({
   size = 120,
   strokeWidth = 8,
-  progress = 0,
-  duration = 1000,
   backgroundColor = "#E5E7EB",
   progressColor = "#3B82F6",
   lineCap = "round",
@@ -18,10 +16,16 @@ const CircularProgressBar = ({
   fontSize = size / 4,
   textFont,
   style,
+  innerShadowColor,
+  duration = 1000,
+  variant = "progress",
+  progress = 0,
   progressPadding = 0,
-  innerShadowColor
+  currentStep = 0,
+  totalSteps = 4,
+  stepGap = 15 // Gap of 15 degrees between steps
 }) => {
-  const animatedProgress = useSharedValue(0);
+  const animatedValue = useSharedValue(0);
   const customFont = useFont(textFont, fontSize);
   const font = textFont ? customFont : matchFont({
     fontFamily: Platform.select({
@@ -31,53 +35,109 @@ const CircularProgressBar = ({
     fontSize: fontSize
   });
   const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
   const path = Skia.Path.Make();
   path.addCircle(size / 2, size / 2, radius);
   const progressStrokeWidth = Math.max(0, strokeWidth - progressPadding * 2);
   useEffect(() => {
-    animatedProgress.value = withTiming(progress / 100, {
+    const targetValue = variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
+    animatedValue.value = withTiming(targetValue, {
       duration,
       easing: Easing.out(Easing.cubic)
     });
-  }, [progress, duration]);
-  const percentageText = useDerivedValue(() => {
-    return `${Math.round(animatedProgress.value * 100)}%`;
+  }, [progress, currentStep, totalSteps, duration, variant]);
+
+  // --- Text Logic ---
+  const textToDisplay = useDerivedValue(() => {
+    if (customText !== undefined) {
+      return customText;
+    }
+    if (variant === "steps") {
+      // Round the animated value to the nearest step for display
+      const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
+      return `${displayStep}/${totalSteps}`;
+    }
+    return `${Math.round(animatedValue.value * 100)}%`;
   });
-  const textToDisplay = customText !== undefined ? customText : percentageText;
   const textX = useDerivedValue(() => {
     if (!font) return 0;
-    const text = typeof textToDisplay === "string" ? textToDisplay : textToDisplay.value;
-    const textWidth = font.measureText(text).width;
+    const textWidth = font.measureText(textToDisplay.value).width;
     return size / 2 - textWidth / 2;
   });
   const textY = size / 2 + fontSize / 3;
+
+  // --- Steps Variant Logic ---
+  const renderSteps = () => {
+    // Calculate the total gap length in the circumference
+    const totalGapDegrees = (totalSteps || 1) * stepGap;
+    const totalArcDegrees = 360 - totalGapDegrees;
+    const stepArcLength = totalArcDegrees / (totalSteps || 1) / 360 * circumference;
+    const gapLength = stepGap / 360 * circumference;
+    const dashPattern = [stepArcLength, gapLength];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        path: path,
+        style: "stroke",
+        strokeWidth: strokeWidth,
+        strokeCap: lineCap,
+        color: backgroundColor,
+        children: /*#__PURE__*/_jsx(DashPathEffect, {
+          intervals: dashPattern
+        })
+      }), /*#__PURE__*/_jsxs(Path, {
+        path: path,
+        style: "stroke",
+        strokeWidth: strokeWidth,
+        strokeCap: lineCap,
+        color: progressColor,
+        start: 0,
+        end: animatedValue,
+        children: [/*#__PURE__*/_jsx(DashPathEffect, {
+          intervals: dashPattern
+        }), innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
+          dx: 0,
+          dy: 0,
+          blur: 4,
+          color: innerShadowColor,
+          inner: true
+        })]
+      })]
+    });
+  };
+
+  // --- Progress Variant Logic ---
+  const renderProgress = () => {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        path: path,
+        style: "stroke",
+        strokeWidth: strokeWidth,
+        strokeCap: lineCap,
+        color: backgroundColor
+      }), /*#__PURE__*/_jsx(Path, {
+        path: path,
+        style: "stroke",
+        strokeWidth: progressStrokeWidth,
+        strokeCap: lineCap,
+        color: progressColor,
+        start: 0,
+        end: animatedValue,
+        children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
+          dx: 0,
+          dy: 0,
+          blur: 4,
+          color: innerShadowColor,
+          inner: true
+        })
+      })]
+    });
+  };
   return /*#__PURE__*/_jsxs(Canvas, {
     style: [{
       width: size,
       height: size
     }, style],
-    children: [/*#__PURE__*/_jsx(Path, {
-      path: path,
-      style: "stroke",
-      strokeWidth: strokeWidth,
-      strokeCap: lineCap,
-      color: backgroundColor
-    }), /*#__PURE__*/_jsx(Path, {
-      path: path,
-      style: "stroke",
-      strokeWidth: progressStrokeWidth,
-      strokeCap: lineCap,
-      color: progressColor,
-      start: 0,
-      end: animatedProgress,
-      children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
-        dx: 0,
-        dy: 0,
-        blur: 4,
-        color: innerShadowColor,
-        inner: true
-      })
-    }), font && /*#__PURE__*/_jsx(Text, {
+    children: [variant === "steps" ? renderSteps() : renderProgress(), font && /*#__PURE__*/_jsx(Text, {
       font: font,
       color: textColor,
       x: textX,

package/lib/module/components/ProgressBar/CircularProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Canvas","matchFont","Path","Shadow","Skia","Text","useFont","useSharedValue","withTiming","useDerivedValue","Easing","Platform","jsx","_jsx","jsxs","_jsxs","CircularProgressBar","size","strokeWidth","progress","duration","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","textFont","style","progressPadding","innerShadowColor","animatedProgress","customFont","font","fontFamily","select","ios","default","radius","path","Make","addCircle","progressStrokeWidth","Math","max","value","easing","out","cubic","percentageText","round","textToDisplay","undefined","textX","text","textWidth","measureText","width","textY","height","children","strokeCap","color","start","end","dx","dy","blur","inner","x","y"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","Canvas","matchFont","Path","Shadow","Skia","Text","useFont","DashPathEffect","useSharedValue","withTiming","useDerivedValue","Easing","Platform","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","textFont","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","animatedValue","customFont","font","fontFamily","select","ios","default","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","textToDisplay","undefined","displayStep","round","textX","textWidth","measureText","width","textY","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","height","x","y","text"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts

@@ -3,8 +3,6 @@ import { ImageRequireSource, ViewStyle } from "react-native";
 interface CircularProgressBarProps {
     size?: number;
     strokeWidth?: number;
-    progress: number;
-    duration?: number;
     backgroundColor?: string;
     progressColor?: string;
     lineCap?: "butt" | "round" | "square";
@@ -13,8 +11,14 @@ interface CircularProgressBarProps {
     fontSize?: number;
     textFont?: ImageRequireSource;
     style?: ViewStyle;
-    progressPadding?: number;
     innerShadowColor?: string;
+    duration?: number;
+    variant?: "progress" | "steps";
+    progress?: number;
+    progressPadding?: number;
+    currentStep?: number;
+    totalSteps?: number;
+    stepGap?: number;
 }
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
 export default CircularProgressBar;

package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,OAAO,EAAE,kBAAkB,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4F3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAkBzC,OAAO,EAAE,kBAAkB,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAG/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA8J3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -119,7 +119,7 @@ const App = () => {
               {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
               {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
               {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-              <CircularProgressBar progress={50} strokeWidth={10} progressColor="#9CA0A3"></CircularProgressBar>
+              <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
               {/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
             </SafeAreaView>
           </BottomSheetStackProvider>

package/src/components/ProgressBar/CircularProgressBar.tsx

@@ -7,6 +7,8 @@ import {
   Skia,
   Text,
   useFont,
+  PathOp,
+  DashPathEffect,
 } from "@shopify/react-native-skia";
 import {
   useSharedValue,
@@ -19,8 +21,6 @@ import { ImageRequireSource, Platform, ViewStyle } from "react-native";
 interface CircularProgressBarProps {
   size?: number;
   strokeWidth?: number;
-  progress: number; // 0 to 100
-  duration?: number;
   backgroundColor?: string;
   progressColor?: string;
   lineCap?: "butt" | "round" | "square";
@@ -29,15 +29,25 @@ interface CircularProgressBarProps {
   fontSize?: number;
   textFont?: ImageRequireSource;
   style?: ViewStyle;
+  innerShadowColor?: string;
+  duration?: number;
+
+  // New variant prop
+  variant?: "progress" | "steps";
+
+  // Props for 'progress' variant
+  progress?: number; // 0 to 100
   progressPadding?: number;
-  innerShadowColor?: string
+
+  // Props for 'steps' variant
+  currentStep?: number;
+  totalSteps?: number;
+  stepGap?: number; // The gap between steps in degrees
 }
 
 const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   size = 120,
   strokeWidth = 8,
-  progress = 0,
-  duration = 1000,
   backgroundColor = "#E5E7EB",
   progressColor = "#3B82F6",
   lineCap = "round",
@@ -46,13 +56,18 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   fontSize = size / 4,
   textFont,
   style,
+  innerShadowColor,
+  duration = 1000,
+  variant = "progress",
+  progress = 0,
   progressPadding = 0,
-  innerShadowColor
+  currentStep = 0,
+  totalSteps = 4,
+  stepGap = 15, // Gap of 15 degrees between steps
 }) => {
-  const animatedProgress = useSharedValue(0);
+  const animatedValue = useSharedValue(0);
 
   const customFont = useFont(textFont, fontSize);
-
   const font = textFont
     ? customFont
     : matchFont({
@@ -61,57 +76,120 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
       });
 
   const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
   const path = Skia.Path.Make();
   path.addCircle(size / 2, size / 2, radius);
 
   const progressStrokeWidth = Math.max(0, strokeWidth - progressPadding * 2);
 
   useEffect(() => {
-    animatedProgress.value = withTiming(progress / 100, {
+    const targetValue =
+      variant === "steps"
+        ? currentStep / (totalSteps || 1)
+        : progress / 100;
+    animatedValue.value = withTiming(targetValue, {
       duration,
       easing: Easing.out(Easing.cubic),
     });
-  }, [progress, duration]);
+  }, [progress, currentStep, totalSteps, duration, variant]);
 
-  const percentageText = useDerivedValue(() => {
-    return `${Math.round(animatedProgress.value * 100)}%`;
+  // --- Text Logic ---
+  const textToDisplay = useDerivedValue(() => {
+    if (customText !== undefined) {
+      return customText;
+    }
+    if (variant === "steps") {
+      // Round the animated value to the nearest step for display
+      const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
+      return `${displayStep}/${totalSteps}`;
+    }
+    return `${Math.round(animatedValue.value * 100)}%`;
   });
 
-  const textToDisplay = customText !== undefined ? customText : percentageText;
-
   const textX = useDerivedValue(() => {
     if (!font) return 0;
-    const text =
-      typeof textToDisplay === "string" ? textToDisplay : textToDisplay.value;
-    const textWidth = font.measureText(text).width;
+    const textWidth = font.measureText(textToDisplay.value).width;
     return size / 2 - textWidth / 2;
   });
 
   const textY = size / 2 + fontSize / 3;
 
+  // --- Steps Variant Logic ---
+  const renderSteps = () => {
+    // Calculate the total gap length in the circumference
+    const totalGapDegrees = (totalSteps || 1) * stepGap;
+    const totalArcDegrees = 360 - totalGapDegrees;
+    const stepArcLength = (totalArcDegrees / (totalSteps || 1) / 360) * circumference;
+    const gapLength = (stepGap / 360) * circumference;
+
+    const dashPattern = [stepArcLength, gapLength];
+
+    return (
+      <>
+        {/* Background Dashed Path */}
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          strokeCap={lineCap}
+          color={backgroundColor}
+        >
+          <DashPathEffect intervals={dashPattern} />
+        </Path>
+
+        {/* Progress Dashed Path */}
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          strokeCap={lineCap}
+          color={progressColor}
+          start={0}
+          end={animatedValue}
+        >
+          <DashPathEffect intervals={dashPattern} />
+          {innerShadowColor && (
+            <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
+          )}
+        </Path>
+      </>
+    );
+  };
+
+  // --- Progress Variant Logic ---
+  const renderProgress = () => {
+    return (
+      <>
+        {/* Background Path */}
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          strokeCap={lineCap}
+          color={backgroundColor}
+        />
+
+        {/* Progress Path */}
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={progressStrokeWidth}
+          strokeCap={lineCap}
+          color={progressColor}
+          start={0}
+          end={animatedValue}
+        >
+          {innerShadowColor && (
+            <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
+          )}
+        </Path>
+      </>
+    );
+  };
+
   return (
     <Canvas style={[{ width: size, height: size }, style]}>
-      <Path
-        path={path}
-        style="stroke"
-        strokeWidth={strokeWidth}
-        strokeCap={lineCap}
-        color={backgroundColor}
-      />
-
-      <Path
-        path={path}
-        style="stroke"
-        strokeWidth={progressStrokeWidth}
-        strokeCap={lineCap}
-        color={progressColor}
-        start={0}
-        end={animatedProgress}
-      >
-        {innerShadowColor && (
-          <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
-        )}
-      </Path>
+      {variant === "steps" ? renderSteps() : renderProgress()}
 
       {/* Text */}
       {font && (
@@ -127,4 +205,4 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   );
 };
 
-export default CircularProgressBar;
+export default CircularProgressBar;