@nexara/nativeflow 0.1.8 → 0.1.9

package/src/components/Progress/Progress.tsx

@@ -1,67 +1,67 @@
-import { useEffect, useMemo, useRef, type FC } from 'react';
-import { Animated, StyleSheet } from "react-native";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
-import { StyledView } from '../StyledComponents';
-import { useTheme } from '../../hooks';
-import type { ProgressProps } from '../../types';
-
-const Progress: FC<ProgressProps> = ({
-    value = 50,
-    thickness = 5,
-    br = 100,
-    trackColor,
-    progressColor,
-}) => {
-
-    const animatedWidth = useRef(new Animated.Value(value)).current;
-    const theme = useTheme();
-    trackColor  = theme?.colors.palette.natural[200];
-
-    useEffect(() => {
-        Animated.timing(animatedWidth, {
-            toValue: value / 100,
-            duration: 1000,
-            useNativeDriver: true,
-        }).start();
-    }, [value]);
-
-    const dynamicStyles = useMemo(() => ({
-        TRACK: {
-            backgroundColor: trackColor,
-            borderRadius: verticalScale(br),
-            height: verticalScale(thickness),
-        },
-        TRACK_ITEM: {
-            backgroundColor: progressColor ?? theme?.colors.brand.primary,
-            borderRadius: verticalScale(br),
-        }
-    }), [br, trackColor, thickness, progressColor, theme]);
-
-    const animatedViewStyle = {
-        transform: [{ scaleX: animatedWidth }],
-        transformOrigin: 'left'
-    }
-
-    return (<>
-        <StyledView
-            style={[STYLES.TRACK, dynamicStyles.TRACK]}
-        >
-            <Animated.View
-                style={[STYLES.TRACK_ITEM, dynamicStyles.TRACK_ITEM, animatedViewStyle]}
-            />
-        </StyledView>
-    </>);
-};
-export default Progress;
-export type { ProgressProps };
-
-const STYLES = StyleSheet.create({
-    TRACK: {
-        overflow: 'hidden',
-        width: '100%',
-    },
-    TRACK_ITEM: {
-        width: "100%",
-        height: '100%'
-    }
+import { useEffect, useMemo, useRef, type FC } from 'react';
+import { Animated, StyleSheet } from "react-native";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import { StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import type { ProgressProps } from '../../types';
+
+const Progress: FC<ProgressProps> = ({
+    value = 50,
+    thickness = 5,
+    br = 100,
+    trackColor,
+    progressColor,
+}) => {
+
+    const animatedWidth = useRef(new Animated.Value(value)).current;
+    const theme = useTheme();
+    trackColor  = theme?.colors.palette.natural[200];
+
+    useEffect(() => {
+        Animated.timing(animatedWidth, {
+            toValue: value / 100,
+            duration: 1000,
+            useNativeDriver: true,
+        }).start();
+    }, [value]);
+
+    const dynamicStyles = useMemo(() => ({
+        TRACK: {
+            backgroundColor: trackColor,
+            borderRadius: verticalScale(br),
+            height: verticalScale(thickness),
+        },
+        TRACK_ITEM: {
+            backgroundColor: progressColor ?? theme?.colors.brand.primary,
+            borderRadius: verticalScale(br),
+        }
+    }), [br, trackColor, thickness, progressColor, theme]);
+
+    const animatedViewStyle = {
+        transform: [{ scaleX: animatedWidth }],
+        transformOrigin: 'left'
+    }
+
+    return (<>
+        <StyledView
+            style={[STYLES.TRACK, dynamicStyles.TRACK]}
+        >
+            <Animated.View
+                style={[STYLES.TRACK_ITEM, dynamicStyles.TRACK_ITEM, animatedViewStyle]}
+            />
+        </StyledView>
+    </>);
+};
+export default Progress;
+export type { ProgressProps };
+
+const STYLES = StyleSheet.create({
+    TRACK: {
+        overflow: 'hidden',
+        width: '100%',
+    },
+    TRACK_ITEM: {
+        width: "100%",
+        height: '100%'
+    }
 });

package/src/components/Provider/ContextManager.tsx

@@ -1,9 +1,9 @@
-let _contextValue: any = null
-
-export const setGlobalContext = (ctx: any) => {
-  _contextValue = ctx;
-};
-
-export const getGlobalContext = () => {
-  return _contextValue;
+let _contextValue: any = null
+
+export const setGlobalContext = (ctx: any) => {
+  _contextValue = ctx;
+};
+
+export const getGlobalContext = () => {
+  return _contextValue;
 };

package/src/components/Provider/NativeProvider.tsx

@@ -1,73 +1,73 @@
-import React, { createContext, useMemo, useState } from 'react';
-import type { ReactNode } from "react";
-import { LightTheme, DarkTheme } from '../../themes';
-import type { scalingModeTypes, Theme, themeModeTypes, ThemeTypes } from '../../types';
-import { setGlobalContext } from './ContextManager';
-
-type ProviderProps = {
-    /** 
-     * The child components that will be wrapped by the provider.  
-     * This ensures all components within the provider have access to the theme context. 
-     */
-    children: ReactNode;
-
-    /** 
-     * Determines whether the theme should be responsive based on screen size.
-     * Default: `true`  
-     */
-    // isResponsive?: boolean;
-
-    /** 
-     * Custom theme object that overrides the default light/dark themes.
-     * If not provided, the default themes (LightTheme/DarkTheme) will be used.
-     */
-    theme?: Theme;
-
-    options?: {
-        defaultTheme?: themeModeTypes;
-        scalingMode?: scalingModeTypes;
-    }
-};
-
-type ThemeContextType = {
-    theme?: ThemeTypes & {
-        toggleThemeMode: () => void;
-    };
-    mode?: themeModeTypes;
-    scaling: { mode: scalingModeTypes }
-};
-
-
-export const Context = createContext<ThemeContextType>({
-    mode: 'light',
-    theme: { ...LightTheme, toggleThemeMode: () => { } },
-    scaling: { mode: 'partial' }
-});
-
-const NativeProvider: React.FC<ProviderProps> = ({
-    children,
-    theme,
-    options
-}) => {
-    const [mode, setMode] = useState<themeModeTypes>(options?.defaultTheme ?? 'light');
-    const toggleThemeMode = () => setMode((prev) => prev === 'dark' ? 'light' : 'dark');
-    const setTheme = { ...((theme && theme[mode]) || (mode === 'light' ? LightTheme : DarkTheme)), toggleThemeMode };
-    const value = useMemo(() => ({
-        theme: setTheme,
-        mode,
-        scaling: { mode: options?.scalingMode ?? 'partial' }
-    }), [theme, mode, options]);
-
-    // useLayoutEffect(() => {
-    //     setGlobalContext(value);
-    // }, [value]);
-    setGlobalContext(value);
-
-    return (<>
-        <Context.Provider value={value}>
-            {children}
-        </Context.Provider>
-    </>);
-}
-export default NativeProvider;
+import React, { createContext, useMemo, useState } from 'react';
+import type { ReactNode } from "react";
+import { LightTheme, DarkTheme } from '../../themes';
+import type { scalingModeTypes, Theme, themeModeTypes, ThemeTypes } from '../../types';
+import { setGlobalContext } from './ContextManager';
+
+type ProviderProps = {
+    /** 
+     * The child components that will be wrapped by the provider.  
+     * This ensures all components within the provider have access to the theme context. 
+     */
+    children: ReactNode;
+
+    /** 
+     * Determines whether the theme should be responsive based on screen size.
+     * Default: `true`  
+     */
+    // isResponsive?: boolean;
+
+    /** 
+     * Custom theme object that overrides the default light/dark themes.
+     * If not provided, the default themes (LightTheme/DarkTheme) will be used.
+     */
+    theme?: Theme;
+
+    options?: {
+        defaultTheme?: themeModeTypes;
+        scalingMode?: scalingModeTypes;
+    }
+};
+
+type ThemeContextType = {
+    theme?: ThemeTypes & {
+        toggleThemeMode: () => void;
+    };
+    mode?: themeModeTypes;
+    scaling: { mode: scalingModeTypes }
+};
+
+
+export const Context = createContext<ThemeContextType>({
+    mode: 'light',
+    theme: { ...LightTheme, toggleThemeMode: () => { } },
+    scaling: { mode: 'partial' }
+});
+
+const NativeProvider: React.FC<ProviderProps> = ({
+    children,
+    theme,
+    options
+}) => {
+    const [mode, setMode] = useState<themeModeTypes>(options?.defaultTheme ?? 'light');
+    const toggleThemeMode = () => setMode((prev) => prev === 'dark' ? 'light' : 'dark');
+    const setTheme = { ...((theme && theme[mode]) || (mode === 'light' ? LightTheme : DarkTheme)), toggleThemeMode };
+    const value = useMemo(() => ({
+        theme: setTheme,
+        mode,
+        scaling: { mode: options?.scalingMode ?? 'partial' }
+    }), [theme, mode, options]);
+
+    // useLayoutEffect(() => {
+    //     setGlobalContext(value);
+    // }, [value]);
+    setGlobalContext(value);
+
+    return (<>
+        <Context.Provider value={value}>
+            {children}
+        </Context.Provider>
+    </>);
+}
+export default NativeProvider;
 export type { ProviderProps };

package/src/components/Radio/RadioGroup.tsx

@@ -1,40 +1,40 @@
-import React, { useCallback, useState, type FC } from "react";
-import { StyledView } from "../StyledComponents";
-import type { RadioGroupProps } from "../../types";
-
-
-const RadioGroup: FC<RadioGroupProps> = ({
-    name,
-    defaultValue,
-    children,
-    onSelect,
-    ...rest
-}) => {
-
-    const [selectedChildren, setSelectedChildren] = useState<string>(defaultValue ?? '');
-
-    const renderChildren = useCallback(() => {
-        return React.Children.toArray(children).map((child) => {
-            if (React.isValidElement<{ name: string; value: string; active: boolean; disabled?: boolean; onPress: () => void; }>(child)) {
-                return React.cloneElement(child, {
-                    active: selectedChildren === child.props.value,
-                    onPress: () => {
-                        if (!('disabled' in child.props) && !child?.props?.disabled) {
-                            child.props?.onPress?.();
-                            onSelect?.(name || child.props.name, child.props.value);
-                            setSelectedChildren(child?.props?.value);
-                        }
-                    }
-                })
-            }
-            return null;
-        })
-    }, [children, selectedChildren]);
-
-    return (<>
-        <StyledView flexDirection='row' gap={15} {...rest}>
-            {renderChildren()}
-        </StyledView>
-    </>);
-}
+import React, { useCallback, useState, type FC } from "react";
+import { StyledView } from "../StyledComponents";
+import type { RadioGroupProps } from "../../types";
+
+
+const RadioGroup: FC<RadioGroupProps> = ({
+    name,
+    defaultValue,
+    children,
+    onSelect,
+    ...rest
+}) => {
+
+    const [selectedChildren, setSelectedChildren] = useState<string>(defaultValue ?? '');
+
+    const renderChildren = useCallback(() => {
+        return React.Children.toArray(children).map((child) => {
+            if (React.isValidElement<{ name: string; value: string; active: boolean; disabled?: boolean; onPress: () => void; }>(child)) {
+                return React.cloneElement(child, {
+                    active: selectedChildren === child.props.value,
+                    onPress: () => {
+                        if (!('disabled' in child.props) && !child?.props?.disabled) {
+                            child.props?.onPress?.();
+                            onSelect?.(name || child.props.name, child.props.value);
+                            setSelectedChildren(child?.props?.value);
+                        }
+                    }
+                })
+            }
+            return null;
+        })
+    }, [children, selectedChildren]);
+
+    return (<>
+        <StyledView flexDirection='row' gap={15} {...rest}>
+            {renderChildren()}
+        </StyledView>
+    </>);
+}
 export default RadioGroup;

package/src/components/Radio/RadioItem.tsx

@@ -1,72 +1,72 @@
-import { useMemo, type FC } from "react";
-import { StyledText, StyledView } from "../StyledComponents";
-import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
-import { horizontalScale } from "../../helpers";
-import { useTheme } from "../../hooks";
-import type { RadioItemProps } from "../../types";
-
-const RadioItem: FC<RadioItemProps> = ({
-    size = 22,
-    stroke = 2,
-    color,
-    active = false,
-    name,
-    disabled,
-    label,
-    fs,
-    fScale = 'base',
-    ff,
-    labelStyle,
-    ...rest
-}) => {
-
-    const STYLES = useMemo(customStyles, []);
-    const theme = useTheme();
-
-    const themedColor = (disabled && theme?.colors.states.disabled) || (color ?? theme?.colors.brand.primary);
-
-    const dynamicStyles: ViewStyle = {
-        borderColor: themedColor,
-        borderWidth: stroke,
-        padding: 2,
-        height: size,
-        width: size,
-    }
-    return (<>
-        <TouchableOpacity
-            {...rest}
-        >
-            <StyledView style={STYLES.MAIN_CONT}>
-                <StyledView style={[STYLES.RADIO_OUTER_CONT, dynamicStyles]}>
-                    {
-                        active &&
-                        <StyledView style={[STYLES.RADIO_INNER_CONT]} bg={themedColor} />
-                    }
-                </StyledView>
-                {
-                    label &&
-                    <StyledText variant={disabled ? 'disabled' : 'primary'} ff={ff} fs={fs} fScale={fScale} style={labelStyle} >{label}</StyledText>
-                }
-            </StyledView>
-        </TouchableOpacity>
-    </>);
-}
-
-export default RadioItem;
-
-const customStyles = () => StyleSheet.create({
-    MAIN_CONT: {
-        flexDirection: 'row',
-        gap: horizontalScale(15),
-        alignItems: 'center',
-    },
-    RADIO_OUTER_CONT: {
-        borderRadius: 100,
-        overflow: 'hidden'
-    },
-    RADIO_INNER_CONT: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 100
-    }
-}); 
+import { useMemo, type FC } from "react";
+import { StyledText, StyledView } from "../StyledComponents";
+import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
+import { horizontalScale } from "../../helpers";
+import { useTheme } from "../../hooks";
+import type { RadioItemProps } from "../../types";
+
+const RadioItem: FC<RadioItemProps> = ({
+    size = 22,
+    stroke = 2,
+    color,
+    active = false,
+    name,
+    disabled,
+    label,
+    fs,
+    fScale = 'base',
+    ff,
+    labelStyle,
+    ...rest
+}) => {
+
+    const STYLES = useMemo(customStyles, []);
+    const theme = useTheme();
+
+    const themedColor = (disabled && theme?.colors.states.disabled) || (color ?? theme?.colors.brand.primary);
+
+    const dynamicStyles: ViewStyle = {
+        borderColor: themedColor,
+        borderWidth: stroke,
+        padding: 2,
+        height: size,
+        width: size,
+    }
+    return (<>
+        <TouchableOpacity
+            {...rest}
+        >
+            <StyledView style={STYLES.MAIN_CONT}>
+                <StyledView style={[STYLES.RADIO_OUTER_CONT, dynamicStyles]}>
+                    {
+                        active &&
+                        <StyledView style={[STYLES.RADIO_INNER_CONT]} bg={themedColor} />
+                    }
+                </StyledView>
+                {
+                    label &&
+                    <StyledText variant={disabled ? 'disabled' : 'primary'} ff={ff} fs={fs} fScale={fScale} style={labelStyle} >{label}</StyledText>
+                }
+            </StyledView>
+        </TouchableOpacity>
+    </>);
+}
+
+export default RadioItem;
+
+const customStyles = () => StyleSheet.create({
+    MAIN_CONT: {
+        flexDirection: 'row',
+        gap: horizontalScale(15),
+        alignItems: 'center',
+    },
+    RADIO_OUTER_CONT: {
+        borderRadius: 100,
+        overflow: 'hidden'
+    },
+    RADIO_INNER_CONT: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 100
+    }
+}); 

package/src/components/Radio/index.ts

@@ -1,9 +1,9 @@
-import RadioGroup from "./RadioGroup";
-import RadioItem from "./RadioItem";
-
-const Radio = {
-    Group: RadioGroup,
-    Item: RadioItem
-}
-
+import RadioGroup from "./RadioGroup";
+import RadioItem from "./RadioItem";
+
+const Radio = {
+    Group: RadioGroup,
+    Item: RadioItem
+}
+
 export default Radio;

package/src/components/Slider/Slider.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { StyleSheet } from "react-native";
-import {  verticalScale, } from "../../helpers/ResponsiveCalculations";
-import { StyledView } from '../StyledComponents';
-
-
-type SliderProps = {
-    value?: number;
-    size?: number;
-    trackColor?: string;
-    progressColor?: string;
-}
-
-const Slider: React.FC<SliderProps> = ({
-    value = 50,
-    size = 5,
-    trackColor = '#645E64',
-    progressColor = '#fff',
-}) => {
-
-    const STYLES = StyleSheet.create({
-        TRACK: {
-            backgroundColor: trackColor,
-            // borderRadius: moderateScale(100),
-            // overflow: 'hidden'
-        },
-        TRACK_ITEM: {
-            backgroundColor: progressColor,
-            height: verticalScale(size),
-            width: `${value}%`,
-            // borderRadius: moderateScale(100)
-        }
-    });
-  
-  
-    return (<>
-            <StyledView f={1} style={STYLES.TRACK}>
-                <StyledView style={STYLES.TRACK_ITEM} >
-
-                </StyledView>
-            </StyledView>
-    </>);
-};
-export default Slider;
-export type { SliderProps };
+import React from 'react';
+import { StyleSheet } from "react-native";
+import {  verticalScale, } from "../../helpers/ResponsiveCalculations";
+import { StyledView } from '../StyledComponents';
+
+
+type SliderProps = {
+    value?: number;
+    size?: number;
+    trackColor?: string;
+    progressColor?: string;
+}
+
+const Slider: React.FC<SliderProps> = ({
+    value = 50,
+    size = 5,
+    trackColor = '#645E64',
+    progressColor = '#fff',
+}) => {
+
+    const STYLES = StyleSheet.create({
+        TRACK: {
+            backgroundColor: trackColor,
+            // borderRadius: moderateScale(100),
+            // overflow: 'hidden'
+        },
+        TRACK_ITEM: {
+            backgroundColor: progressColor,
+            height: verticalScale(size),
+            width: `${value}%`,
+            // borderRadius: moderateScale(100)
+        }
+    });
+  
+  
+    return (<>
+            <StyledView f={1} style={STYLES.TRACK}>
+                <StyledView style={STYLES.TRACK_ITEM} >
+
+                </StyledView>
+            </StyledView>
+    </>);
+};
+export default Slider;
+export type { SliderProps };