related-ui-components 3.0.0 → 3.0.1

package/lib/module/app.js

@@ -2,10 +2,10 @@
 
 import React, { useState } from "react";
 import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
-import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack.js"; // Adjust path as needed
+// Adjust path as needed
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { SelaDealCard } from "./components/index.js";
 import { lightTheme, RelatedProvider, useTheme } from "./theme/index.js";
+import CircularProgressBar from "./components/ProgressBar/CircularProgressBar.js";
 import { BottomSheetStackProvider } from "./contexts/index.js";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -40,27 +40,17 @@ const App = () => {
           children: /*#__PURE__*/_jsxs(BottomSheetStackProvider, {
             children: [/*#__PURE__*/_jsx(StatusBar, {
               barStyle: "light-content"
-            }), /*#__PURE__*/_jsxs(SafeAreaView, {
+            }), /*#__PURE__*/_jsx(SafeAreaView, {
               style: styles.appContainer,
-              children: [/*#__PURE__*/_jsx(CarouselCardStack, {
-                data: DUMMY_DATA
-                // backgroundColor="#333" // Set a background color for the component area
-                // onActiveIndexChange={(index) => {
-                //   console.log("Active item index:", index);
-                // }}
-              }), /*#__PURE__*/_jsx(SelaDealCard, {
-                variant: "horizontal",
-                width: 300,
-                height: 300,
-                label: "discount",
-                description: "HELLO",
-                providerName: "Riva Club",
-                price: "100",
-                lockOverlay: true
-                // grayscaleIntensity={80}
-                ,
-                backgroundImage: require("./assets/images/namshi-banner.png")
-              })]
+              children: /*#__PURE__*/_jsx(CircularProgressBar, {
+                progress: 40,
+                customText: 'بلاتينم',
+                totalSteps: 4,
+                currentStep: 4,
+                size: 150,
+                strokeWidth: 2,
+                progressColor: "#9CA0A3"
+              })
             })]
           })
         })

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","SelaDealCard","lightTheme","RelatedProvider","useTheme","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","data","variant","width","height","label","description","providerName","price","lockOverlay","backgroundImage","require","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","customText","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAeC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAkC,cAAc;AACV;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAarE,SAAoBC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC1E,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAIlE,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAE;AAAG,CAAC,EAAE,CAACC,CAAC,EAAEC,CAAC,MAAM;EACvDC,EAAE,EAAE,SAASD,CAAC,GAAG,CAAC,EAAE;EACpB;EACAE,KAAK,EAAE,2CAA2C;EAClDC,KAAK,EAAE,UAAUH,CAAC,GAAG,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,MAAMI,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACqB,aAAa,EAAEC,gBAAgB,CAAC,GAAG7B,QAAQ,CAChD8B,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAqB8B,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMmC,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;EAED,oBACExB,IAAA,CAAAI,SAAA;IAAAwB,QAAA,eACE5B,IAAA,CAACF,gBAAgB;MAAA8B,QAAA,eACf5B,IAAA,CAACR,sBAAsB;QAACqC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzC5B,IAAA,CAACN,eAAe;UAACqB,KAAK,EAAEtB,UAAW;UAAAmC,QAAA,eACjC1B,KAAA,CAACL,wBAAwB;YAAA+B,QAAA,gBACvB5B,IAAA,CAACT,SAAS;cAACwC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC/B,IAAA,CAACX,YAAY;cAACwC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eAuDvC5B,IAAA,CAACJ,mBAAmB;gBAACyB,QAAQ,EAAE,EAAG;gBAAEa,UAAU,EAAE,SAAU;gBAACC,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,GAAI;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAS,CAAsB;YAAC,CAqBxJ,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACT;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMP,MAAM,GAAG1C,UAAU,CAACkD,MAAM,CAAC;EAC/BP,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPW,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,QAAQ;IAAE;IAC1BC,UAAU,EAAC;EACb;AACF,CAAC,CAAC;AAEF,eAAe7B,GAAG","ignoreList":[]}

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

@@ -1,20 +1,20 @@
 "use strict";
 
 import React, { useEffect } from "react";
-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 { Canvas, Path, Shadow, Skia, DashPathEffect } from "@shopify/react-native-skia";
+import { useSharedValue, withTiming, Easing } from "react-native-reanimated";
+import { StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CircularProgressBar = ({
   size = 120,
   strokeWidth = 8,
-  backgroundColor = "#E5E7EB",
-  progressColor = "#3B82F6",
+  backgroundColor,
+  progressColor,
   lineCap = "round",
   customText,
-  textColor = "white",
+  textColor,
   fontSize = size / 4,
-  textFont,
   style,
   innerShadowColor,
   duration = 1000,
@@ -23,17 +23,16 @@ const CircularProgressBar = ({
   progressPadding = 0,
   currentStep = 0,
   totalSteps = 4,
-  stepGap = 15 // Gap of 15 degrees between steps
+  stepGap = 15,
+  textStyle
 }) => {
+  const {
+    theme
+  } = useTheme();
   const animatedValue = useSharedValue(0);
-  const customFont = useFont(textFont, fontSize);
-  const font = textFont ? customFont : matchFont({
-    fontFamily: Platform.select({
-      ios: "Helvetica",
-      default: "serif"
-    }),
-    fontSize: fontSize
-  });
+  const finalProgressColor = progressColor || theme.primary;
+  const finalBackgroundColor = backgroundColor || theme.disabled;
+  const finalTextColor = textColor || theme.onSurface;
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const path = Skia.Path.Make();
@@ -45,30 +44,8 @@ const CircularProgressBar = ({
       duration,
       easing: Easing.out(Easing.cubic)
     });
-  }, [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 textX = useDerivedValue(() => {
-    if (!font) return 0;
-    const textWidth = font.measureText(textToDisplay.value).width;
-    return size / 2 - textWidth / 2;
-  });
-  const textY = size / 2 + fontSize / 3;
-
-  // --- Steps Variant Logic ---
+  }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
   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;
@@ -80,7 +57,7 @@ const CircularProgressBar = ({
         style: "stroke",
         strokeWidth: strokeWidth,
         strokeCap: lineCap,
-        color: backgroundColor,
+        color: finalBackgroundColor,
         children: /*#__PURE__*/_jsx(DashPathEffect, {
           intervals: dashPattern
         })
@@ -89,7 +66,7 @@ const CircularProgressBar = ({
         style: "stroke",
         strokeWidth: strokeWidth,
         strokeCap: lineCap,
-        color: progressColor,
+        color: finalProgressColor,
         start: 0,
         end: animatedValue,
         children: [/*#__PURE__*/_jsx(DashPathEffect, {
@@ -104,45 +81,49 @@ const CircularProgressBar = ({
       })]
     });
   };
-
-  // --- 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, {
+  const renderProgress = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Path, {
+      path: path,
+      style: "stroke",
+      strokeWidth: strokeWidth,
+      strokeCap: lineCap,
+      color: finalBackgroundColor
+    }), /*#__PURE__*/_jsx(Path, {
+      path: path,
+      style: "stroke",
+      strokeWidth: progressStrokeWidth,
+      strokeCap: lineCap,
+      color: finalProgressColor,
+      start: 0,
+      end: animatedValue,
+      children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
+        dx: 0,
+        dy: 0,
+        blur: 4,
+        color: innerShadowColor,
+        inner: true
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
     style: [{
       width: size,
-      height: size
+      height: size,
+      justifyContent: "center",
+      alignItems: "center"
     }, style],
-    children: [variant === "steps" ? renderSteps() : renderProgress(), font && /*#__PURE__*/_jsx(Text, {
-      font: font,
-      color: textColor,
-      x: textX,
-      y: textY,
-      text: textToDisplay
+    children: [/*#__PURE__*/_jsx(Canvas, {
+      style: StyleSheet.absoluteFill,
+      children: variant === "steps" ? renderSteps() : renderProgress()
+    }), /*#__PURE__*/_jsx(Text
+    // bold
+    , {
+      style: [{
+        color: finalTextColor,
+        fontSize: fontSize,
+        textAlign: "center"
+      }, textStyle],
+      children: customText
     })]
   });
 };

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

@@ -1 +1 @@
-{"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":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SACEC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,OAAO,EAEPC,cAAc,QACT,4BAA4B;AACnC,SACEC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,MAAM,QACD,yBAAyB;AAChC,SAA6BC,QAAQ,QAAmB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AA6BvE,MAAMC,mBAAuD,GAAGA,CAAC;EAC/DC,IAAI,GAAG,GAAG;EACVC,WAAW,GAAG,CAAC;EACfC,eAAe,GAAG,SAAS;EAC3BC,aAAa,GAAG,SAAS;EACzBC,OAAO,GAAG,OAAO;EACjBC,UAAU;EACVC,SAAS,GAAG,OAAO;EACnBC,QAAQ,GAAGP,IAAI,GAAG,CAAC;EACnBQ,QAAQ;EACRC,KAAK;EACLC,gBAAgB;EAChBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG,UAAU;EACpBC,QAAQ,GAAG,CAAC;EACZC,eAAe,GAAG,CAAC;EACnBC,WAAW,GAAG,CAAC;EACfC,UAAU,GAAG,CAAC;EACdC,OAAO,GAAG,EAAE,CAAE;AAChB,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAG9B,cAAc,CAAC,CAAC,CAAC;EAEvC,MAAM+B,UAAU,GAAGjC,OAAO,CAACsB,QAAQ,EAAED,QAAQ,CAAC;EAC9C,MAAMa,IAAI,GAAGZ,QAAQ,GACjBW,UAAU,GACVtC,SAAS,CAAC;IACRwC,UAAU,EAAE7B,QAAQ,CAAC8B,MAAM,CAAC;MAAEC,GAAG,EAAE,WAAW;MAAEC,OAAO,EAAE;IAAQ,CAAC,CAAC;IACnEjB,QAAQ,EAAEA;EACZ,CAAC,CAAC;EAEN,MAAMkB,MAAM,GAAG,CAACzB,IAAI,GAAGC,WAAW,IAAI,CAAC;EACvC,MAAMyB,aAAa,GAAG,CAAC,GAAGC,IAAI,CAACC,EAAE,GAAGH,MAAM;EAC1C,MAAMI,IAAI,GAAG7C,IAAI,CAACF,IAAI,CAACgD,IAAI,CAAC,CAAC;EAC7BD,IAAI,CAACE,SAAS,CAAC/B,IAAI,GAAG,CAAC,EAAEA,IAAI,GAAG,CAAC,EAAEyB,MAAM,CAAC;EAE1C,MAAMO,mBAAmB,GAAGL,IAAI,CAACM,GAAG,CAAC,CAAC,EAAEhC,WAAW,GAAGa,eAAe,GAAG,CAAC,CAAC;EAE1EnC,SAAS,CAAC,MAAM;IACd,MAAMuD,WAAW,GACftB,OAAO,KAAK,OAAO,GACfG,WAAW,IAAIC,UAAU,IAAI,CAAC,CAAC,GAC/BH,QAAQ,GAAG,GAAG;IACpBK,aAAa,CAACiB,KAAK,GAAG9C,UAAU,CAAC6C,WAAW,EAAE;MAC5CvB,QAAQ;MACRyB,MAAM,EAAE7C,MAAM,CAAC8C,GAAG,CAAC9C,MAAM,CAAC+C,KAAK;IACjC,CAAC,CAAC;EACJ,CAAC,EAAE,CAACzB,QAAQ,EAAEE,WAAW,EAAEC,UAAU,EAAEL,QAAQ,EAAEC,OAAO,CAAC,CAAC;;EAE1D;EACA,MAAM2B,aAAa,GAAGjD,eAAe,CAAC,MAAM;IAC1C,IAAIe,UAAU,KAAKmC,SAAS,EAAE;MAC5B,OAAOnC,UAAU;IACnB;IACA,IAAIO,OAAO,KAAK,OAAO,EAAE;MACvB;MACA,MAAM6B,WAAW,GAAGd,IAAI,CAACe,KAAK,CAACxB,aAAa,CAACiB,KAAK,IAAInB,UAAU,IAAI,CAAC,CAAC,CAAC;MACvE,OAAO,GAAGyB,WAAW,IAAIzB,UAAU,EAAE;IACvC;IACA,OAAO,GAAGW,IAAI,CAACe,KAAK,CAACxB,aAAa,CAACiB,KAAK,GAAG,GAAG,CAAC,GAAG;EACpD,CAAC,CAAC;EAEF,MAAMQ,KAAK,GAAGrD,eAAe,CAAC,MAAM;IAClC,IAAI,CAAC8B,IAAI,EAAE,OAAO,CAAC;IACnB,MAAMwB,SAAS,GAAGxB,IAAI,CAACyB,WAAW,CAACN,aAAa,CAACJ,KAAK,CAAC,CAACW,KAAK;IAC7D,OAAO9C,IAAI,GAAG,CAAC,GAAG4C,SAAS,GAAG,CAAC;EACjC,CAAC,CAAC;EAEF,MAAMG,KAAK,GAAG/C,IAAI,GAAG,CAAC,GAAGO,QAAQ,GAAG,CAAC;;EAErC;EACA,MAAMyC,WAAW,GAAGA,CAAA,KAAM;IACxB;IACA,MAAMC,eAAe,GAAG,CAACjC,UAAU,IAAI,CAAC,IAAIC,OAAO;IACnD,MAAMiC,eAAe,GAAG,GAAG,GAAGD,eAAe;IAC7C,MAAME,aAAa,GAAID,eAAe,IAAIlC,UAAU,IAAI,CAAC,CAAC,GAAG,GAAG,GAAIU,aAAa;IACjF,MAAM0B,SAAS,GAAInC,OAAO,GAAG,GAAG,GAAIS,aAAa;IAEjD,MAAM2B,WAAW,GAAG,CAACF,aAAa,EAAEC,SAAS,CAAC;IAE9C,oBACExD,KAAA,CAAAE,SAAA;MAAAwD,QAAA,gBAEE5D,IAAA,CAACZ,IAAI;QACH+C,IAAI,EAAEA,IAAK;QACXpB,KAAK,EAAC,QAAQ;QACdR,WAAW,EAAEA,WAAY;QACzBsD,SAAS,EAAEnD,OAAQ;QACnBoD,KAAK,EAAEtD,eAAgB;QAAAoD,QAAA,eAEvB5D,IAAA,CAACP,cAAc;UAACsE,SAAS,EAAEJ;QAAY,CAAE;MAAC,CACtC,CAAC,eAGPzD,KAAA,CAACd,IAAI;QACH+C,IAAI,EAAEA,IAAK;QACXpB,KAAK,EAAC,QAAQ;QACdR,WAAW,EAAEA,WAAY;QACzBsD,SAAS,EAAEnD,OAAQ;QACnBoD,KAAK,EAAErD,aAAc;QACrBuD,KAAK,EAAE,CAAE;QACTC,GAAG,EAAEzC,aAAc;QAAAoC,QAAA,gBAEnB5D,IAAA,CAACP,cAAc;UAACsE,SAAS,EAAEJ;QAAY,CAAE,CAAC,EACzC3C,gBAAgB,iBACfhB,IAAA,CAACX,MAAM;UAAC6E,EAAE,EAAE,CAAE;UAACC,EAAE,EAAE,CAAE;UAACC,IAAI,EAAE,CAAE;UAACN,KAAK,EAAE9C,gBAAiB;UAACqD,KAAK;QAAA,CAAE,CAChE;MAAA,CACG,CAAC;IAAA,CACP,CAAC;EAEP,CAAC;;EAED;EACA,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3B,oBACEpE,KAAA,CAAAE,SAAA;MAAAwD,QAAA,gBAEE5D,IAAA,CAACZ,IAAI;QACH+C,IAAI,EAAEA,IAAK;QACXpB,KAAK,EAAC,QAAQ;QACdR,WAAW,EAAEA,WAAY;QACzBsD,SAAS,EAAEnD,OAAQ;QACnBoD,KAAK,EAAEtD;MAAgB,CACxB,CAAC,eAGFR,IAAA,CAACZ,IAAI;QACH+C,IAAI,EAAEA,IAAK;QACXpB,KAAK,EAAC,QAAQ;QACdR,WAAW,EAAE+B,mBAAoB;QACjCuB,SAAS,EAAEnD,OAAQ;QACnBoD,KAAK,EAAErD,aAAc;QACrBuD,KAAK,EAAE,CAAE;QACTC,GAAG,EAAEzC,aAAc;QAAAoC,QAAA,EAElB5C,gBAAgB,iBACfhB,IAAA,CAACX,MAAM;UAAC6E,EAAE,EAAE,CAAE;UAACC,EAAE,EAAE,CAAE;UAACC,IAAI,EAAE,CAAE;UAACN,KAAK,EAAE9C,gBAAiB;UAACqD,KAAK;QAAA,CAAE;MAChE,CACG,CAAC;IAAA,CACP,CAAC;EAEP,CAAC;EAED,oBACEnE,KAAA,CAAChB,MAAM;IAAC6B,KAAK,EAAE,CAAC;MAAEqC,KAAK,EAAE9C,IAAI;MAAEiE,MAAM,EAAEjE;IAAK,CAAC,EAAES,KAAK,CAAE;IAAA6C,QAAA,GACnD1C,OAAO,KAAK,OAAO,GAAGoC,WAAW,CAAC,CAAC,GAAGgB,cAAc,CAAC,CAAC,EAGtD5C,IAAI,iBACH1B,IAAA,CAACT,IAAI;MACHmC,IAAI,EAAEA,IAAK;MACXoC,KAAK,EAAElD,SAAU;MACjB4D,CAAC,EAAEvB,KAAM;MACTwB,CAAC,EAAEpB,KAAM;MACTqB,IAAI,EAAE7B;IAAc,CACrB,CACF;EAAA,CACK,CAAC;AAEb,CAAC;AAED,eAAexC,mBAAmB","ignoreList":[]}
+{"version":3,"names":["React","useEffect","Canvas","Path","Shadow","Skia","DashPathEffect","useSharedValue","withTiming","Easing","StyleSheet","Text","View","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","textStyle","theme","animatedValue","finalProgressColor","primary","finalBackgroundColor","disabled","finalTextColor","onSurface","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","width","height","justifyContent","alignItems","absoluteFill","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageRequireSource, ViewStyle } from "react-native";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
 interface CircularProgressBarProps {
     size?: number;
     strokeWidth?: number;
@@ -9,7 +9,6 @@ interface CircularProgressBarProps {
     customText?: string;
     textColor?: string;
     fontSize?: number;
-    textFont?: ImageRequireSource;
     style?: ViewStyle;
     innerShadowColor?: string;
     duration?: number;
@@ -19,6 +18,7 @@ interface CircularProgressBarProps {
     currentStep?: number;
     totalSteps?: number;
     stepGap?: number;
+    textStyle?: StyleProp<TextStyle>;
 }
 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;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"}
+{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAGL,SAAS,EAGT,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,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,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuI3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/package.json

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

package/src/app.tsx

@@ -52,13 +52,13 @@ const App = () => {
             <BottomSheetStackProvider>
               <StatusBar barStyle="light-content" />
               <SafeAreaView style={styles.appContainer}>
-                <CarouselCardStack
+                {/* <CarouselCardStack
                   data={DUMMY_DATA}
                   // backgroundColor="#333" // Set a background color for the component area
                   // onActiveIndexChange={(index) => {
                   //   console.log("Active item index:", index);
                   // }}
-                />
+                /> */}
                 {/* <CircularProgressBar
               progress={5}
               lineCap="round"
@@ -106,7 +106,7 @@ const App = () => {
                 {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
                 {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
                 {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-                {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
+                <CircularProgressBar progress={40}  customText={'بلاتينم'} totalSteps={4} currentStep={4} size={150}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
                 {/* <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={300} onValueChange={console.log}></RangeSlider> */}
                 {/* <PhoneInput
                   value=""
@@ -114,7 +114,7 @@ const App = () => {
                   inputContainerStyle={{ height: 55 }}
                 ></PhoneInput> */}
 
-                <SelaDealCard
+                {/* <SelaDealCard
                   variant="horizontal"
                   width={300}
                   height={300}
@@ -126,7 +126,7 @@ const App = () => {
                   // grayscaleIntensity={80}
                   backgroundImage={require("./assets/images/namshi-banner.png")}
                 ></SelaDealCard>
-     
+      */}
               </SafeAreaView>
             </BottomSheetStackProvider>
           </RelatedProvider>

package/src/components/ProgressBar/CircularProgressBar.tsx

@@ -5,7 +5,6 @@ import {
   Path,
   Shadow,
   Skia,
-  Text,
   useFont,
   PathOp,
   DashPathEffect,
@@ -16,7 +15,17 @@ import {
   useDerivedValue,
   Easing,
 } from "react-native-reanimated";
-import { ImageRequireSource, Platform, ViewStyle } from "react-native";
+import {
+  ImageRequireSource,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import { useTheme } from "../../theme";
 
 interface CircularProgressBarProps {
   size?: number;
@@ -27,34 +36,27 @@ interface CircularProgressBarProps {
   customText?: string;
   textColor?: string;
   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
+  progress?: number;
   progressPadding?: number;
-
-  // Props for 'steps' variant
   currentStep?: number;
   totalSteps?: number;
-  stepGap?: number; // The gap between steps in degrees
+  stepGap?: number;
+  textStyle?: StyleProp<TextStyle>;
 }
 
 const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   size = 120,
   strokeWidth = 8,
-  backgroundColor = "#E5E7EB",
-  progressColor = "#3B82F6",
+  backgroundColor,
+  progressColor,
   lineCap = "round",
   customText,
-  textColor = "white",
+  textColor,
   fontSize = size / 4,
-  textFont,
   style,
   innerShadowColor,
   duration = 1000,
@@ -63,17 +65,15 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   progressPadding = 0,
   currentStep = 0,
   totalSteps = 4,
-  stepGap = 15, // Gap of 15 degrees between steps
+  stepGap = 15,
+  textStyle,
 }) => {
+  const { theme } = useTheme();
   const animatedValue = useSharedValue(0);
 
-  const customFont = useFont(textFont, fontSize);
-  const font = textFont
-    ? customFont
-    : matchFont({
-        fontFamily: Platform.select({ ios: "Helvetica", default: "serif" }),
-        fontSize: fontSize,
-      });
+  const finalProgressColor = progressColor || theme.primary;
+  const finalBackgroundColor = backgroundColor || theme.disabled;
+  const finalTextColor = textColor || theme.onSurface;
 
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
@@ -84,66 +84,38 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
   useEffect(() => {
     const targetValue =
-      variant === "steps"
-        ? currentStep / (totalSteps || 1)
-        : progress / 100;
+      variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
     animatedValue.value = withTiming(targetValue, {
       duration,
       easing: Easing.out(Easing.cubic),
     });
-  }, [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 textX = useDerivedValue(() => {
-    if (!font) return 0;
-    const textWidth = font.measureText(textToDisplay.value).width;
-    return size / 2 - textWidth / 2;
-  });
-
-  const textY = size / 2 + fontSize / 3;
+  }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
 
-  // --- 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 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}
+          color={finalBackgroundColor}
         >
           <DashPathEffect intervals={dashPattern} />
         </Path>
-
-        {/* Progress Dashed Path */}
         <Path
           path={path}
           style="stroke"
           strokeWidth={strokeWidth}
           strokeCap={lineCap}
-          color={progressColor}
+          color={finalProgressColor}
           start={0}
           end={animatedValue}
         >
@@ -156,52 +128,60 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
     );
   };
 
-  // --- 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>
-      </>
-    );
-  };
+  const renderProgress = () => (
+    <>
+      <Path
+        path={path}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        strokeCap={lineCap}
+        color={finalBackgroundColor}
+      />
+      <Path
+        path={path}
+        style="stroke"
+        strokeWidth={progressStrokeWidth}
+        strokeCap={lineCap}
+        color={finalProgressColor}
+        start={0}
+        end={animatedValue}
+      >
+        {innerShadowColor && (
+          <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
+        )}
+      </Path>
+    </>
+  );
 
   return (
-    <Canvas style={[{ width: size, height: size }, style]}>
-      {variant === "steps" ? renderSteps() : renderProgress()}
-
-      {/* Text */}
-      {font && (
-        <Text
-          font={font}
-          color={textColor}
-          x={textX}
-          y={textY}
-          text={textToDisplay}
-        />
-      )}
-    </Canvas>
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        style,
+      ]}
+    >
+      <Canvas style={StyleSheet.absoluteFill}>
+        {variant === "steps" ? renderSteps() : renderProgress()}
+      </Canvas>
+      <Text
+        // bold
+        style={[
+          {
+            color: finalTextColor,
+            fontSize: fontSize,
+            textAlign: "center",
+          },
+          textStyle,
+        ]}
+      >
+        {customText}
+      </Text>
+    </View>
   );
 };