@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Portal/PortalProvider.tsx

@@ -1,37 +1,37 @@
-import React, { useCallback, useMemo, useState } from "react";
-import PortalContext from "./PortalContext";
-interface PortalProviderProps {
-    children: React.ReactNode;
-}
-interface Element {
-    name: string;
-    component: React.ReactNode;
-}
-const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
-
-    const [components, setComponents] = useState<Record<string, React.ReactNode>>({});
-    const addComponent = useCallback(({ name, component }: Element) => {
-        setComponents(prevComponents => ({
-            ...prevComponents,
-            [name]: component
-        }));
-    },[]);
-    const removeComponent = useCallback((name: string) => {
-        setComponents(prevComponents => {
-            const newComponents = { ...prevComponents };
-            delete newComponents[name];
-            return newComponents;
-        });
-    },[])
-    const values = useMemo(()=>({addComponent, removeComponent}), []);
-    return (<>
-        <PortalContext.Provider value={values}>
-            {children}
-            {Object.entries(components).map(([_name, Component]) => (
-                Component
-            ))}
-        </PortalContext.Provider>
-    </>);
-
-}
+import React, { useCallback, useMemo, useState } from "react";
+import PortalContext from "./PortalContext";
+interface PortalProviderProps {
+    children: React.ReactNode;
+}
+interface Element {
+    name: string;
+    component: React.ReactNode;
+}
+const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
+
+    const [components, setComponents] = useState<Record<string, React.ReactNode>>({});
+    const addComponent = useCallback(({ name, component }: Element) => {
+        setComponents(prevComponents => ({
+            ...prevComponents,
+            [name]: component
+        }));
+    },[]);
+    const removeComponent = useCallback((name: string) => {
+        setComponents(prevComponents => {
+            const newComponents = { ...prevComponents };
+            delete newComponents[name];
+            return newComponents;
+        });
+    },[])
+    const values = useMemo(()=>({addComponent, removeComponent}), []);
+    return (<>
+        <PortalContext.Provider value={values}>
+            {children}
+            {Object.entries(components).map(([_name, Component]) => (
+                Component
+            ))}
+        </PortalContext.Provider>
+    </>);
+
+}
 export default PortalProvider;

package/src/components/Progress/Progress.tsx

@@ -1,66 +1,67 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Animated, StyleSheet } from "react-native";
-import { moderateScale, verticalScale, } from "../../helpers/ResponsiveCalculations";
-import { StyledView } from '../StyledComponents';
-import { useTheme } from '../../hooks';
-import type { ProgressProps } from '../../types';
-
-const Progress: React.FC<ProgressProps> = ({
-    value = 50,
-    thickness = 5,
-    br = 100,
-    trackColor = '#E8E8E8',
-    progressColor,
-}) => {
-
-    const animatedWidth = useRef(new Animated.Value(value)).current;
-    const theme = useTheme();
-
-    useEffect(() => {
-        Animated.timing(animatedWidth, {
-            toValue: value / 100,
-            duration: 1000,
-            useNativeDriver: true,
-        }).start();
-    }, [value]);
-
-    const dynamicStyles = useMemo(() => ({
-        TRACK: {
-            backgroundColor: trackColor,
-            borderRadius: moderateScale(br),
-            height: verticalScale(thickness),
-        },
-        TRACK_ITEM: {
-            backgroundColor: progressColor ?? theme?.colors.primary,
-            borderRadius: moderateScale(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

@@ -0,0 +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>
+    </>);
+}
+export default RadioGroup;

package/src/components/Radio/RadioItem.tsx

@@ -0,0 +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
+    }
+}); 

package/src/components/Radio/index.ts

@@ -0,0 +1,9 @@
+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 { moderateScale, 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 };

package/src/components/Stack/HStack.tsx

@@ -1,36 +1,33 @@
-import React, { useMemo } from "react";
-import type { ViewStyle } from "react-native";
-import { horizontalScale } from "../../helpers/ResponsiveCalculations";
-import type { HStackProps } from "../../types";
-import { StyledView } from "../StyledComponents";
-
-const HStack: React.FC<HStackProps> = ({
-    justify,
-    align = 'center',
-    fWrap = 'wrap',
-    gap = 10,
-    style,
-    children,
-    ...rest
-}) => {
-    const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
-
-    const viewProps: ViewStyle = {
-        gap: calculatedGap,
-        flexDirection: 'row',
-        justifyContent: justify,
-        alignItems: align,
-        flexWrap: fWrap,
-    };
-
-    return (<>
-        <StyledView
-            style={[viewProps, style]}
-            {...rest}
-        >
-            {children}
-        </StyledView>
-    </>)
-}
-export default HStack;
+import type { FC } from "react";
+import type { ViewStyle } from "react-native";
+import { horizontalScale } from "../../helpers/ResponsiveCalculations";
+import type { HStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
+
+const HStack: FC<HStackProps> = ({
+    align = 'center',
+    fWrap = 'wrap',
+    gap = 10,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+
+    const viewProps: ViewStyle = {
+        gap: horizontalScale(gap),
+        flexDirection: 'row',
+        alignItems: align,
+        flexWrap: fWrap,
+    };
+
+    return (<>
+        <StyledView
+            style={[viewProps, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>)
+}
+export default HStack;
 export type { HStackProps };