@nexara/nativeflow 0.1.1 → 0.1.4

package/src/components/Switch/Switch.tsx

@@ -13,21 +13,21 @@ const Switch: React.FC<SwitchProps> = ({
     activeTrackColor,
     inactiveTrackColor = '#808080',
     onChange,
-    ...props
+    ...rest
 }) => {
 
     const theme: any = useTheme();
-    const switchColor = disabled ? '#808080' : color ?? theme.colors.switchColor;
+    const switchColor = disabled ? '#808080' : color ?? theme.colors.primary;
 
     return (<>
         <NativeSwitch
             value={checked}
-            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 90), false: LightenColorShades(inactiveTrackColor, 60) }}
+            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 50), false: LightenColorShades(inactiveTrackColor, 60) }}
             thumbColor={switchColor}
             onValueChange={onChange}
             style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}
             disabled={disabled}
-            {...props}
+            {...rest}
         />
     </>)
 }

package/src/components/TouchableRipple/TouchableRipple.tsx

@@ -1,92 +1,92 @@
-import React from 'react';
-import { Pressable, StyleSheet } from "react-native";
-import type { ViewStyle, StyleProp, PressableProps } from "react-native";
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { StyledView } from '../StyledComponents';
+// import React from 'react';
+// import { Pressable, StyleSheet } from "react-native";
+// import type { ViewStyle, StyleProp, PressableProps } from "react-native";
+// import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+// import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+// import { StyledView } from '../StyledComponents';
 
 
-type TouchableRippleProps = PressableProps & {
-    rippleColor?: string;
-    style?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-}
+// type TouchableRippleProps = PressableProps & {
+//     rippleColor?: string;
+//     style?: StyleProp<ViewStyle>;
+//     children?: React.ReactNode;
+// }
 
-const TouchableRipple: React.FC<TouchableRippleProps> = ({
-    rippleColor = '#b6b6b681',
-    style,
-    children,
-    ...props
-}) => {
+// const TouchableRipple: React.FC<TouchableRippleProps> = ({
+//     rippleColor = '#b6b6b681',
+//     style,
+//     children,
+//     ...rest
+// }) => {
 
-    const positionX = useSharedValue(0);
-    const positionY = useSharedValue(0);
-    const overlayHeight = useSharedValue(0);
-    const overlayWidth = useSharedValue(0);
-    const scale = useSharedValue(0);
-    const opacity = useSharedValue(1);
+//     const positionX = useSharedValue(0);
+//     const positionY = useSharedValue(0);
+//     const overlayHeight = useSharedValue(0);
+//     const overlayWidth = useSharedValue(0);
+//     const scale = useSharedValue(0);
+//     const opacity = useSharedValue(1);
 
-    const STYLES = StyleSheet.create({
-        OVERLAY: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: -1
-        }
-    });
+//     const STYLES = StyleSheet.create({
+//         OVERLAY: {
+//             position: 'absolute',
+//             top: 0,
+//             left: 0,
+//             zIndex: -1
+//         }
+//     });
 
-    const effectAnimatedStyle = useAnimatedStyle(() => {
-        const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
-        return {
-            height: radius * 2,
-            width: radius * 2,
-            opacity: opacity.value,
-            borderRadius: radius,
-            backgroundColor: rippleColor,
-            transform: [
-                { translateX: positionX.value - radius },
-                { translateY: positionY.value - radius },
-                {
-                    scale: scale.value
-                }
-            ]
-        }
-    });
+//     const effectAnimatedStyle = useAnimatedStyle(() => {
+//         const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
+//         return {
+//             height: radius * 2,
+//             width: radius * 2,
+//             opacity: opacity.value,
+//             borderRadius: radius,
+//             backgroundColor: rippleColor,
+//             transform: [
+//                 { translateX: positionX.value - radius },
+//                 { translateY: positionY.value - radius },
+//                 {
+//                     scale: scale.value
+//                 }
+//             ]
+//         }
+//     });
 
-    const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
-        positionX.value = allTouches[0].x;
-        positionY.value = allTouches[0].y;
-        opacity.value = 1;
-        scale.value = 0;
-        scale.value = withTiming(1, { duration: 600 });
-    }).onTouchesUp(() => {
-        opacity.value = withTiming(0, { duration: 800 });
-    }).onTouchesCancelled(() => {
-        opacity.value = withTiming(0, { duration: 800 });
-    }) : Gesture.Simultaneous();
+//     const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
+//         positionX.value = allTouches[0].x;
+//         positionY.value = allTouches[0].y;
+//         opacity.value = 1;
+//         scale.value = 0;
+//         scale.value = withTiming(1, { duration: 600 });
+//     }).onTouchesUp(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }).onTouchesCancelled(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }) : Gesture.Simultaneous();
 
 
-    return (<>
-        <GestureHandlerRootView style={{ width: '100%' }}>
-            <GestureDetector gesture={onGesturePress}>
-                <Pressable
-                    {...props}
-                >
-                    <StyledView
-                        overflow='hidden'
-                        onLayout={({ nativeEvent: { layout: { height, width } } }) => {
-                            overlayHeight.value = height;
-                            overlayWidth.value = width;
-                        }}
-                        style={style}
-                    >
-                        {children}
-                        <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
-                    </StyledView>
-                </Pressable>
-            </GestureDetector>
-        </GestureHandlerRootView>
-    </>);
-};
-export default TouchableRipple;
-export type { TouchableRippleProps };
+//     return (<>
+//         <GestureHandlerRootView style={{ width: '100%' }}>
+//             <GestureDetector gesture={onGesturePress}>
+//                 <Pressable
+//                     {...rest}
+//                 >
+//                     <StyledView
+//                         overflow='hidden'
+//                         onLayout={({ nativeEvent: { layout: { height, width } } }) => {
+//                             overlayHeight.value = height;
+//                             overlayWidth.value = width;
+//                         }}
+//                         style={style}
+//                     >
+//                         {children}
+//                         <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
+//                     </StyledView>
+//                 </Pressable>
+//             </GestureDetector>
+//         </GestureHandlerRootView>
+//     </>);
+// };
+// export default TouchableRipple;
+// export type { TouchableRippleProps };

package/src/components/UserInput/UserInput.tsx

@@ -1,12 +1,13 @@
-import { forwardRef, useMemo } from 'react';
-import { TextInput, StyleSheet } from 'react-native';
+import { useMemo } from 'react';
+import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
+import type { TextStyle } from 'react-native';
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
 import { useTheme } from '../../hooks';
 import { StyledText, StyledView } from '../StyledComponents';
 import type { UserInputProps } from '../../types';
 import generateColors from './generateColors';
 
-const UserInput = forwardRef<TextInput, UserInputProps>(({
+const UserInput: React.FC<UserInputProps> = ({
     variant = 'standard',
     label,
     bg,
@@ -32,8 +33,9 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
     renderLeftIcon,
     renderRightIcon,
     styles,
-    ...props
-}, ref) => {
+    ref,
+    ...rest
+}) => {
 
     const theme: any = useTheme();
 
@@ -43,56 +45,50 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
         computedLabelColor
     } = useMemo(() => generateColors(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
 
-    const STYLES = StyleSheet.create({
+    const dynamicStyles = {
         INPUT_CONT: {
-            flexDirection: 'row',
-            alignItems: multiline ? 'flex-start' : 'center',
+            alignItems: multiline ? 'flex-start' : 'center' as ViewStyle['alignItems'],
             backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
             borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
             borderWidth: variant === 'standard' ? 0 : stroke,
             borderBottomWidth: stroke,
-            paddingHorizontal: horizontalScale(14),
             borderRadius: verticalScale(br),
-            gap: horizontalScale(10),
-            height: multiline ? 'auto' : verticalScale(48),
-            paddingVertical: multiline ? horizontalScale(10) : 'auto',
+            height: multiline ? undefined : verticalScale(48),
+            paddingVertical: multiline ? horizontalScale(10) : undefined,
         },
         INPUT: {
             color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
             fontSize: responsiveFontSize(inputFs),
-            textAlignVertical: multiline ? 'top' : 'center',
-            minHeight: multiline ? 100 : 'auto',
-            maxHeight: multiline ? 150 : 'auto',
-            padding: 0,
-            flex: 1,
+            textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
+            minHeight: multiline ? 100 : undefined,
+            maxHeight: multiline ? 150 : undefined,
         },
         ERROR_HELPER_TEXT: {
             color: theme.colors.error,
-            paddingHorizontal: 5
         }
-    });
+    };
 
     return (<>
-        <StyledView gap={verticalScale(5)} style={styles?.mainContainer}>
+        <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
             {
                 label &&
                 <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
             }
             <StyledView
-                style={[STYLES.INPUT_CONT, styles?.inputContainer]}
+                style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
             >
                 {
                     renderLeftIcon
                 }
                 <TextInput
                     ref={ref}
-                    style={[STYLES.INPUT, styles?.input]}
+                    style={[STYLES.INPUT, dynamicStyles.INPUT, styles?.input]}
                     placeholder={placeholder}
                     placeholderTextColor={computedPlaceholderColor}
                     editable={!disabled}
                     multiline={multiline}
                     cursorColor={computedCursorColor}
-                    {...props}
+                    {...rest}
                 />
                 {
                     renderRightIcon
@@ -100,25 +96,35 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
             </StyledView>
             {
                 (isError && helperText) &&
-                <StyledText variant={textVariant?.helperText} fs={helperTextFS} style={[STYLES.ERROR_HELPER_TEXT, styles?.helperText]}>{helperText}</StyledText>
+                <StyledText
+                    variant={textVariant?.helperText}
+                    fs={helperTextFS}
+                    style={[
+                        STYLES.ERROR_HELPER_TEXT,
+                        dynamicStyles.ERROR_HELPER_TEXT,
+                        styles?.helperText
+                    ]}
+                >
+                    {helperText}
+                </StyledText>
             }
         </StyledView>
     </>)
-});
+};
 export default UserInput;
 export type { UserInputProps };
 
-// const STYLES = StyleSheet.create({
-//     INPUT_CONT: {
-//         flexDirection: 'row',
-//         paddingHorizontal: horizontalScale(14),
-//         gap: horizontalScale(10),
-//     },
-//     INPUT: {
-//         padding: 0,
-//         flex: 1,
-//     },
-//     ERROR_HELPER_TEXT: {
-//         paddingHorizontal: 5
-//     }
-// });
+const STYLES = StyleSheet.create({
+    INPUT_CONT: {
+        flexDirection: 'row',
+        paddingHorizontal: horizontalScale(14),
+        gap: horizontalScale(10),
+    },
+    INPUT: {
+        padding: 0,
+        flex: 1,
+    },
+    ERROR_HELPER_TEXT: {
+        paddingHorizontal: 5
+    }
+});

package/src/components/UserInput/UserInputV2.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { TextInputProps, ViewStyle, TextStyle } from "react-native";
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
@@ -116,7 +116,7 @@ const UserInputV2: React.FC<UserInputV2Props> = ({
                         editable={!isDisabled}
                         multiline={multiline}
                         cursorColor={cursor}
-                        {...props}
+                        {...rest}
                     /> */}
                     <StyledText>Email</StyledText>
                 </View>

package/src/helpers/LightenColorShades.ts

@@ -1,7 +1,27 @@
-const LightenColorShades = (hex:string, amount: number)=> {
-    let r = Math.min(255, parseInt(hex.slice(1, 3), 16) + amount);
-    let g = Math.min(255, parseInt(hex.slice(3, 5), 16) + amount);
-    let b = Math.min(255, parseInt(hex.slice(5, 7), 16) + amount);
-    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
-}
+const LightenColorShades = (color: string, amount: number): string => {
+    if (color.startsWith("#")) {
+        color = color.slice(1);
+    }
+    if (color.length === 3) {
+        color = color.split("").map(c => c + c).join("");
+    }
+    if (color.length !== 6) {
+        throw new Error("Invalid HEX color.");
+    }
+   
+    const getValidColorValue = (start: number): number => {
+        const value = parseInt(color.slice(start, start + 2), 16);
+        return Number.isNaN(value) ? 0 : Math.min(255, Math.max(0, value + amount));
+    };
+
+    const r: number = getValidColorValue(0);
+    const g: number = getValidColorValue(2);
+    const b: number = getValidColorValue(4);
+
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+        .toString(16)
+        .slice(1)
+        .toUpperCase()}`;
+};
+
 export default LightenColorShades;

package/src/helpers/ResponsiveCalculations.ts

@@ -13,7 +13,11 @@ const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
 
+const scalingCache = new Map<'hScale' | 'vScale' | 'fs', object>();
 
+export const fun = () => {
+    return scalingCache
+}
 const checkIsPhone = (size: number): number => {
     if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
         return size;
@@ -24,11 +28,18 @@ export const horizontalScale = (size: number): number => {
     if (checkIsPhone(size)) {
         return size;
     }
+    const hScaleCache: any = scalingCache.get('hScale') || {};
+    if (hScaleCache?.[size]) {
+        return hScaleCache?.[size];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
     let scale = (shortDimension / guidelineBaseHeight);
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedSize = size * Math.max(scale, 0.80);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    hScaleCache[size] = finalSize;
+    scalingCache.set('hScale', hScaleCache)
+    return finalSize;
 }
 
 
@@ -36,11 +47,18 @@ export const verticalScale = (size: number): number => {
     if (checkIsPhone(size)) {
         return size;
     }
+    const vScaleCache: any = scalingCache.get('vScale') || {};
+    if (vScaleCache?.[size]) {
+        return vScaleCache?.[size];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
     let scale = (longDimension / guidelineBaseHeight);
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedSize = size * Math.max(scale, 0.80);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    vScaleCache[size] = finalSize;
+    scalingCache.set('vScale', vScaleCache)
+    return finalSize;
 }
 
 
@@ -63,13 +81,20 @@ export const responsiveFontSize = (fontSize: number): number => {
     if (checkIsPhone(fontSize)) {
         return fontSize;
     }
+    const fsCache: any = scalingCache.get('fs') || {};
+    if (fsCache?.[fontSize]) {
+        return fsCache?.[fontSize];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
     const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
     const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
     let scale = screenDiagonal / baseScreenDiagonal;
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedFontSize = fontSize * Math.max(scale, 0.85);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize))
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
+    fsCache[fontSize] = finalSize;
+    scalingCache.set('vScale', fsCache)
+    return finalSize;
 };
 
 

package/src/helpers/index.ts

@@ -1,2 +1,3 @@
 export { default as getGridValue } from './CalculateGridSize';
-export { default as deviceScreenSizeCategory } from './DeviceSizeCategory';
+export { default as deviceScreenSizeCategory } from './DeviceSizeCategory';
+export * from "./ResponsiveCalculations";

package/src/index.ts

@@ -11,7 +11,7 @@ export { default as Progress } from './components/Progress/Progress';
 export { default as Slider } from './components/Slider/Slider';
 export { default as Surface } from './components/Surface/Surface';
 export { default as Switch } from './components/Switch/Switch';
-export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
+// export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
 export { Dialog, DialogHead, DialogBody, DialogFoot, DialogDescription } from './components/Dialog';
 export { default as CheckBox } from './components/CheckBox/CheckBox';
 export { default as Avatar } from './components/Avatar';
@@ -41,7 +41,7 @@ export type { ProgressProps } from './components/Progress/Progress';
 export type { SliderProps } from './components/Slider/Slider';
 export type { SurfaceProps } from './components/Surface/Surface';
 export type { SwitchProps } from './components/Switch/Switch';
-export type { TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
+// export type { TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
 export type { DialogProps, DialogHeadProps, DialogBodyProps, DialogFootProps, DialogDescriptionProps } from './components/Dialog';
 export type { CheckBoxProps } from './components/CheckBox/CheckBox';
 export type { AvatarTextProps, AvatarImageProps } from './components/Avatar';

package/src/themes/LightTheme.ts

@@ -1,4 +1,3 @@
-import Color from "color";
 import { dialogSizes, typographySizes } from "../constants";
 import type { ThemeTypes } from "../types";
 
@@ -56,7 +55,7 @@ import type { ThemeTypes } from "../types";
 //     switchColor: '#353935',
 //     error: '#ED2939',
 // })
-console.log(Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string())
+// console.log(Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string())
 const LightTheme: ThemeTypes = {
     isDark: false,
     colors: {

package/src/types/button.type.ts

@@ -1,10 +1,11 @@
-import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
 import type { ButtonVariant, TypographyVariant } from "./common.type";
+import type { JSX } from "react";
 
 /**
  * @see https://rn-nativeflow-docs.onrender.com/docs/components/button
  */
-export type ButtonProps = PressableProps & {
+export type ButtonProps = TouchableOpacityProps & {
     /** Specifies the button style variant (e.g., 'contained', 'outlined') */
     variant?: ButtonVariant;
 

package/src/types/chip.type.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
 
 export type ChipProps = PressableProps & {

package/src/types/dialog.type.ts

@@ -11,9 +11,6 @@ export type DialogProps = {
     /** Defines the dialog style variant */
     variant?: DialogVariant;
 
-    /** Controls the visibility of the dialog */
-    isVisible?: boolean;
-
     /** Defines the horizontal size of the dialog */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
 
@@ -23,12 +20,12 @@ export type DialogProps = {
     /** Background color of the backdrop */
     backdropColor?: string;
 
-    /** Duration of the animation in milliseconds */
-    animationDuration?: number;
-
     /** Callback function triggered when the dialog is closed */
     onClose?: () => void;
 
+    /** Custom styles for the dialog container */
+    containerStyle?: StyleProp<ViewStyle>;
+
     /** Content to be displayed inside the dialog */
     children?: ReactNode;
 };
@@ -46,12 +43,13 @@ export type DialogBodyProps = {
 };
 
 export type DialogDescriptionProps = {
-    /** Font size for the dialog description text */
-    fs?: number;
 
     /** Variant of the typography to be applied to the text */
     textVariant?: TypographyVariant;
 
+    /** Font size for the dialog description text */
+    fs?: number;
+
     /** Style for the container wrapping the dialog description */
     containerStyle?: StyleProp<ViewStyle>;
 

package/src/types/index.ts

@@ -9,4 +9,5 @@ export * from './menu.type';
 export * from './stack.type';
 export * from './styledComponents.type';
 export * from './switch.type';
-export * from './userInput.type';
+export * from './userInput.type';
+export * from './progress.type'

package/src/types/menu.type.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
+import type { JSX, ReactNode } from "react";
+import type { StyleProp, TextStyle, TouchableOpacityProps, View, ViewStyle } from "react-native";
 import type { TypographyVariant } from "./common.type";
 
 
@@ -52,6 +52,12 @@ export type MenuProps = {
      * Child components to be rendered inside the menu. 
      */
     children?: ReactNode;
+
+    /**  
+     * A ref to access the underlying View component.  
+     * This can be used for measuring layout, animations, or imperative interactions.  
+     */
+    ref?: React.RefObject<View | null>
 };
 
 

package/src/types/progress.type.ts

@@ -0,0 +1,16 @@
+export type ProgressProps = {
+    /** Current progress value (0-100) */
+    value?: number;
+
+    /** Thickness of the progress bar */
+    thickness?: number;
+
+    /** Border radius of the progress bar */
+    br?: number;
+
+    /** Background color of the track (unfilled part) */
+    trackColor?: string;
+
+    /** Color of the progress (filled part) */
+    progressColor?: string;
+}