related-ui-components 4.0.5 → 4.0.7

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

@@ -1,8 +1,9 @@
 "use strict";
 
 import { useTheme } from "../../theme/ThemeContext.js";
-import React from "react";
+import React, { useEffect } from "react";
 import { View, Text, StyleSheet } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from "react-native-reanimated";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ProgressBar = ({
   progress = 0.5,
@@ -21,7 +22,8 @@ const ProgressBar = ({
   textPosition = "inside",
   textAlign = "left",
   showText = true,
-  isRTL = false
+  isRTL = false,
+  animationDuration = 500
 }) => {
   const {
     theme,
@@ -32,6 +34,18 @@ const ProgressBar = ({
   const remainingColor = remainingColorProp ?? theme.border;
   const textColor = textColorProp ?? theme.onPrimary;
   const clampedProgress = Math.min(Math.max(progress, 0), 1);
+  const progressWidth = useSharedValue(clampedProgress);
+  useEffect(() => {
+    progressWidth.value = withTiming(clampedProgress, {
+      duration: animationDuration,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
+    });
+  }, [clampedProgress, animationDuration, progressWidth]);
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progressWidth.value * 100}%`
+    };
+  });
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, containerStyle, {
       width
@@ -40,9 +54,7 @@ const ProgressBar = ({
       style: [styles.textAbove, {
         color: theme.text,
         textAlign
-      },
-      // Use theme.text for outside text
-      textStyle],
+      }, textStyle],
       children: text
     }), /*#__PURE__*/_jsxs(View, {
       style: [styles.barContainer, {
@@ -50,24 +62,21 @@ const ProgressBar = ({
         borderRadius,
         backgroundColor: remainingColor
       }, barContainerStyle],
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [/*#__PURE__*/_jsx(Animated.View, {
         style: [styles.progressBar, isRTL ? {
           right: 0
         } : {
           left: 0
         }, {
-          width: `${clampedProgress * 100}%`,
           height: "100%",
           borderRadius,
           backgroundColor: progressColor
-        }, progressStyle]
+        }, progressStyle, animatedProgressStyle]
       }), textPosition === "inside" && showText && /*#__PURE__*/_jsx(Text, {
         style: [styles.textInside, {
           color: textColor,
           textAlign
-        },
-        // Use determined textColor for inside
-        textStyle],
+        }, textStyle],
         children: text
       })]
     }), textPosition === "below" && showText && /*#__PURE__*/_jsx(Text, {
@@ -75,9 +84,7 @@ const ProgressBar = ({
       style: [styles.textBelow, {
         color: theme.text,
         textAlign
-      },
-      // Use theme.text for outside text
-      textStyle],
+      }, textStyle],
       children: text
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["useTheme","React","View","Text","StyleSheet","jsx","_jsx","jsxs","_jsxs","ProgressBar","progress","text","containerStyle","barContainerStyle","progressStyle","remainingStyle","textStyle","progressColor","progressColorProp","remainingColor","remainingColorProp","textColor","textColorProp","height","width","borderRadius","textPosition","textAlign","showText","isRTL","theme","rtl","primary","border","onPrimary","clampedProgress","Math","min","max","style","styles","container","children","textAbove","color","barContainer","backgroundColor","progressBar","right","left","textInside","numberOfLines","textBelow","create","justifyContent","overflow","position","top","bottom","textAlignVertical","paddingHorizontal","fontWeight","marginBottom","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/ProgressBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useTheme","React","useEffect","View","Text","StyleSheet","Animated","useSharedValue","useAnimatedStyle","withTiming","Easing","jsx","_jsx","jsxs","_jsxs","ProgressBar","progress","text","containerStyle","barContainerStyle","progressStyle","remainingStyle","textStyle","progressColor","progressColorProp","remainingColor","remainingColorProp","textColor","textColorProp","height","width","borderRadius","textPosition","textAlign","showText","isRTL","animationDuration","theme","rtl","primary","border","onPrimary","clampedProgress","Math","min","max","progressWidth","value","duration","easing","bezier","animatedProgressStyle","style","styles","container","children","textAbove","color","barContainer","backgroundColor","progressBar","right","left","textInside","numberOfLines","textBelow","create","justifyContent","overflow","position","top","bottom","textAlignVertical","paddingHorizontal","fontWeight","marginBottom","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/ProgressBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/contexts/BottomSheetStackProvider.js

@@ -57,7 +57,7 @@ export const BottomSheetStackProvider = ({
     ...props,
     disappearsOnIndex: -1,
     style: [props.style, {
-      backgroundColor: "rgba(0,0,0,0,1)"
+      backgroundColor: "rgba(0,0,0,0.1)"
     }],
     appearsOnIndex: 0,
     pressBehavior: "close"

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

@@ -20,6 +20,7 @@ interface ProgressBarProps {
     textAlign?: "center" | "left" | "right";
     showText?: boolean;
     isRTL?: boolean;
+    animationDuration?: number;
 }
 declare const ProgressBar: React.FC<ProgressBarProps>;
 export default ProgressBar;

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5E,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6F3C,CAAC;AAqCF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA0B,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ5E,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6G3C,CAAC;AAqCF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -18,24 +18,24 @@
     "@shopify/react-native-skia": ">=v2.0.0-next.4",
     "country-telephone-data": ">=0.6.3",
     "date-fns": ">=4.1.0",
+    "expo": ">=52.0.0",
     "expo-checkbox": ">=4.1.4",
     "expo-clipboard": ">=7.1.4",
     "expo-image": ">=2.4.0",
     "expo-linear-gradient": ">=14.1.5",
     "expo-status-bar": ">=2.2.3",
-    "expo": ">=52.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.79.0",
     "react-native-calendars": ">=1.1312.0",
     "react-native-color-matrix-image-filters": ">=7.0.2",
     "react-native-gesture-handler": ">=2.24.0",
+    "react-native-keyboard-controller": "^1.18.0",
     "react-native-picker-select": ">=9.3.1",
     "react-native-qrcode-svg": ">=6.3.15",
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.11.2",
-    "react-native-toast-message": ">=2.3.3",
-    "react-native-keyboard-controller": "^1.18.0"
+    "react-native-toast-message": ">=2.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -77,5 +77,8 @@
   "eslintIgnore": [
     "node_modules/",
     "lib/"
-  ]
+  ],
+  "dependencies": {
+    "related-ui-components": "^4.0.5"
+  }
 }

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,6 +1,12 @@
 import { useTheme } from "../../theme/ThemeContext";
-import React from "react";
+import React, { useEffect } from "react";
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
 
 export type ProgressBarTextPosition = "inside" | "above" | "below";
 export type ProgressBarTextAlign = "center" | "left" | "right";
@@ -23,6 +29,7 @@ interface ProgressBarProps {
   textAlign?: "center" | "left" | "right";
   showText?: boolean;
   isRTL?: boolean;
+  animationDuration?: number;
 }
 
 const ProgressBar: React.FC<ProgressBarProps> = ({
@@ -43,8 +50,9 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   textAlign = "left",
   showText = true,
   isRTL = false,
+  animationDuration = 500,
 }) => {
-  const {theme, isRTL : rtl} = useTheme();
+  const { theme, isRTL: rtl } = useTheme();
   isRTL = rtl;
   const progressColor = progressColorProp ?? theme.primary;
   const remainingColor = remainingColorProp ?? theme.border;
@@ -52,13 +60,28 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
 
   const clampedProgress: number = Math.min(Math.max(progress, 0), 1);
 
+  const progressWidth = useSharedValue(clampedProgress);
+
+  useEffect(() => {
+    progressWidth.value = withTiming(clampedProgress, {
+      duration: animationDuration,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+    });
+  }, [clampedProgress, animationDuration, progressWidth]);
+
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progressWidth.value * 100}%`,
+    };
+  });
+
   return (
     <View style={[styles.container, containerStyle, { width }]}>
       {textPosition === "above" && showText && (
         <Text
           style={[
             styles.textAbove,
-            { color: theme.text, textAlign }, // Use theme.text for outside text
+            { color: theme.text, textAlign },
             textStyle,
           ]}
         >
@@ -77,17 +100,17 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           barContainerStyle,
         ]}
       >
-        <View
+        <Animated.View
           style={[
             styles.progressBar,
             isRTL ? { right: 0 } : { left: 0 },
             {
-              width: `${clampedProgress * 100}%`,
               height: "100%",
               borderRadius,
               backgroundColor: progressColor,
             },
             progressStyle,
+            animatedProgressStyle,
           ]}
         />
 
@@ -95,7 +118,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           <Text
             style={[
               styles.textInside,
-              { color: textColor, textAlign }, // Use determined textColor for inside
+              { color: textColor, textAlign },
               textStyle,
             ]}
           >
@@ -109,7 +132,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           numberOfLines={1}
           style={[
             styles.textBelow,
-            { color: theme.text, textAlign }, // Use theme.text for outside text
+            { color: theme.text, textAlign },
             textStyle,
           ]}
         >
@@ -155,4 +178,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ProgressBar;
+export default ProgressBar;

package/src/contexts/BottomSheetStackProvider.tsx

@@ -80,7 +80,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
       <BottomSheetBackdrop
         {...props}
         disappearsOnIndex={-1}
-        style={[props.style, { backgroundColor: "rgba(0,0,0,0,1)" }]}
+        style={[props.style, { backgroundColor: "rgba(0,0,0,0.1)" }]}
         appearsOnIndex={0}
         pressBehavior={"close"}
       />