@nexara/nativeflow 0.1.6 → 0.1.8

package/src/components/Provider/NativeProvider.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useMemo, useState } from 'react';
 import type { ReactNode } from "react";
 import { LightTheme, DarkTheme } from '../../themes';
-import type { Theme, themeModeTypes, ThemeTypes } from '../../types';
+import type { scalingModeTypes, Theme, themeModeTypes, ThemeTypes } from '../../types';
+import { setGlobalContext } from './ContextManager';
 
 type ProviderProps = {
     /** 
@@ -14,40 +15,54 @@ type ProviderProps = {
      * Determines whether the theme should be responsive based on screen size.
      * Default: `true`  
      */
-    isResponsive?: boolean;
+    // 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 = {
-    isResponsive?: boolean;
     theme?: ThemeTypes & {
         toggleThemeMode: () => void;
     };
     mode?: themeModeTypes;
+    scaling: { mode: scalingModeTypes }
 };
 
 
-export const Context = createContext<ThemeContextType | undefined>({
-    isResponsive: true,
+export const Context = createContext<ThemeContextType>({
     mode: 'light',
-    theme: { ...LightTheme, toggleThemeMode: () => { } }
+    theme: { ...LightTheme, toggleThemeMode: () => { } },
+    scaling: { mode: 'partial' }
 });
 
 const NativeProvider: React.FC<ProviderProps> = ({
     children,
-    isResponsive = true,
     theme,
+    options
 }) => {
-    const [mode, setMode] = useState<themeModeTypes>('light');
-
+    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, isResponsive, mode }), [theme, mode]);
+    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}

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,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from "react-native";
-import { moderateScale, verticalScale, } from "../../helpers/ResponsiveCalculations";
+import {  verticalScale, } from "../../helpers/ResponsiveCalculations";
 import { StyledView } from '../StyledComponents';
 
 
@@ -21,14 +21,14 @@ const Slider: React.FC<SliderProps> = ({
     const STYLES = StyleSheet.create({
         TRACK: {
             backgroundColor: trackColor,
-            borderRadius: moderateScale(100),
+            // borderRadius: moderateScale(100),
             // overflow: 'hidden'
         },
         TRACK_ITEM: {
             backgroundColor: progressColor,
             height: verticalScale(size),
             width: `${value}%`,
-            borderRadius: moderateScale(100)
+            // borderRadius: moderateScale(100)
         }
     });
   

package/src/components/Stack/HStack.tsx

@@ -1,31 +1,28 @@
-import React, { useMemo } from "react";
+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: React.FC<HStackProps> = ({
-    justify,
+const HStack: FC<HStackProps> = ({
     align = 'center',
     fWrap = 'wrap',
     gap = 10,
-    style,
+    containerStyle,
     children,
     ...rest
 }) => {
-    const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
 
     const viewProps: ViewStyle = {
-        gap: calculatedGap,
+        gap: horizontalScale(gap),
         flexDirection: 'row',
-        justifyContent: justify,
         alignItems: align,
         flexWrap: fWrap,
     };
 
     return (<>
         <StyledView
-            style={[viewProps, style]}
+            style={[viewProps, containerStyle]}
             {...rest}
         >
             {children}

package/src/components/Stack/VStack.tsx

@@ -1,27 +1,22 @@
-import React, { useMemo } from "react";
+import type { FC } from "react";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import type { VStackProps } from "../../types";
 import { StyledView } from "../StyledComponents";
 import type { ViewStyle } from "react-native";
 
-const VStack: React.FC<VStackProps> = ({
-    children,
-    align,
+const VStack: FC<VStackProps> = ({
     gap = 10,
-    style,
+    containerStyle,
+    children,
     ...rest
 }) => {
-
-    const calculatedGap: number = useMemo(() => verticalScale(gap), [gap]);
-
     const viewProps: ViewStyle = {
         flexDirection: 'column',
-        alignItems: align,
-        gap: calculatedGap,
+        gap: verticalScale(gap),
     };
     return (<>
         <StyledView
-            style={[viewProps, style]}
+            style={[viewProps, containerStyle]}
             {...rest}
         >
             {children}

package/src/components/StyledComponents/StyledText.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { type FC } from 'react';
 import { Text } from 'react-native';
 import { responsiveFontSize } from '../../helpers/ResponsiveCalculations';
 import { useTheme } from '../../hooks';
 import type { StyledTextProps } from '../../types';
 
-const StyledText: React.FC<StyledTextProps> = ({
-    variant = 'h5',
+const StyledText: FC<StyledTextProps> = ({
+    variant = 'primary',
+    fScale = 'base',
     children,
     style,
     ff,
@@ -14,19 +15,27 @@ const StyledText: React.FC<StyledTextProps> = ({
     fw,
     color,
     themeColor,
-    primary,
-    secondary,
     ...rest
 }) => {
-    const { colors, typography: { variantSizes } }: any = useTheme();
+    const { colors, sizes: { typography: typographyScales } }: any = useTheme();
+
+    const getVariantColor = () => {
+        switch (variant) {
+            case 'secondary': return colors.typography.secondary;
+            case 'tertiary': return colors.typography.tertiary;
+            case 'disabled': return colors.typography.disabled;
+            case 'inverse': return colors.typography.inverse;
+            default: return colors.typography.primary;
+        }
+    };
     return (
         <Text
             style={[{
-                fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
+                fontSize: responsiveFontSize(fs ?? typographyScales[fScale]),
                 fontFamily: ff ?? '',
                 textAlign: tas ? 'center' : 'auto',
                 fontWeight: fw ?? 'normal',
-                color: color ?? (themeColor && colors.primary || primary && colors.textPrimary || secondary && colors.textSecondary || colors.textTertiary),
+                color: color ?? (themeColor && colors.brand.primary || getVariantColor()),
             },
                 style,
             ]}

package/src/components/StyledComponents/StyledView.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../../hooks';
 import type { StyledViewProps } from '../../types';
 
 
-const StyledView: React.FC<StyledViewProps> = ({
+const StyledView = forwardRef<View, StyledViewProps>(({
     f,
     justify,
     align,
@@ -15,12 +15,11 @@ const StyledView: React.FC<StyledViewProps> = ({
     w,
     children,
     style,
-    ref,
     ...rest
-}) => {
-
-    const theme = useTheme(themeBg);
+}, ref) => {
 
+    const theme = useTheme();
+    
     return (
         <View
             style={[{
@@ -28,7 +27,7 @@ const StyledView: React.FC<StyledViewProps> = ({
                 justifyContent: justify,
                 alignItems: align,
                 flexWrap: fWrap,
-                backgroundColor: bg ?? (themeBg ? theme?.colors.secondary : 'transparent'),
+                backgroundColor: bg ?? (themeBg ? theme?.colors.background.default : 'transparent'),
                 height: h,
                 width: w,
             },
@@ -40,7 +39,7 @@ const StyledView: React.FC<StyledViewProps> = ({
             {children}
         </View>
     );
-};
+});
 
 export default StyledView;
 export type { StyledViewProps };

package/src/components/Surface/Surface.tsx

@@ -1,36 +1,29 @@
-import React from 'react';
-import { StyleSheet} from "react-native";
+import type { FC } from 'react';
 import { StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import { verticalScale } from '../../helpers';
+import type { SurfaceProps } from '../../types';
 
-
-type SurfaceProps = {
-  
-}
-
-const Surface: React.FC<SurfaceProps> = ({
-  
+const Surface: FC<SurfaceProps> = ({
+    variant = 'elevated',
+    padding = 10,
+    br = 5,
+    children,
+    ...rest
 }) => {
 
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            height: 100,
-            width: 100,
-            backgroundColor: '#fff',
-            shadowColor: "#000",
-            // shadowOffset: {
-            //     width: 100,
-            //     height: 100,
-            // },
-            // shadowOpacity: 0.43,
-            // shadowRadius: 9.51,
-
-            elevation: 15,
-        }
-    });
+    const { colors }: any = useTheme();
+    const styles = variant === 'elevated' ? { boxShadow: colors.elevation.level1 } : { borderColor: colors.border.default, borderWidth: 0.5 };
 
     return (<>
-        <StyledView style={STYLES.CONTAINER}>
-
+        <StyledView
+            padding={verticalScale(padding)}
+            borderRadius={verticalScale(br)}
+            bg={colors.background.surface}
+            {...styles}
+            {...rest}
+        >
+            {children}
         </StyledView>
     </>);
 };

package/src/components/Switch/Switch.tsx

@@ -1,31 +1,33 @@
-import React from "react";
+import type { FC } from "react";
 import { Switch as NativeSwitch } from "react-native";
-import LightenColorShades from "../../helpers/LightenColorShades";
-import { moderateScale } from "../../helpers/ResponsiveCalculations";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from "../../hooks";
 import type { SwitchProps } from "../../types";
+import Color from "color";
 
-const Switch: React.FC<SwitchProps> = ({
+const Switch: FC<SwitchProps> = ({
     checked = true,
     color,
     disabled = false,
-    size = 0.8,
+    size = 0.9,
     activeTrackColor,
-    inactiveTrackColor = '#808080',
+    inactiveTrackColor,
     onChange,
     ...rest
 }) => {
 
-    const theme: any = useTheme();
-    const switchColor = disabled ? '#808080' : color ?? theme.colors.primary;
+    const { colors }: any = useTheme();
+    const switchColor = disabled ? colors.states.disabled : color ?? colors.brand.primary;
+    const disabledAndInActiveTrackColor = colors.palette.natural[200];
+    const generateActiveTrackColor =  Color(colors.brand.primary).lighten(0).alpha(0.3).rgb().string();
 
     return (<>
         <NativeSwitch
             value={checked}
-            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 50), false: LightenColorShades(inactiveTrackColor, 60) }}
+            trackColor={{ true: (disabled && disabledAndInActiveTrackColor) || (activeTrackColor ?? generateActiveTrackColor), false: (disabled && disabledAndInActiveTrackColor) || (inactiveTrackColor ?? disabledAndInActiveTrackColor) }}
             thumbColor={switchColor}
             onValueChange={onChange}
-            style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}
+            style={{ transform: [{ scaleX: verticalScale(size) }, { scaleY: verticalScale(size) }] }}
             disabled={disabled}
             {...rest}
         />

package/src/components/UserInput/UserInput.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
 import type { TextStyle } from 'react-native';
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
@@ -7,37 +7,40 @@ import { StyledText, StyledView } from '../StyledComponents';
 import type { UserInputProps } from '../../types';
 import generateColors from './generateColors';
 
-const UserInput: React.FC<UserInputProps> = ({
+const UserInput = forwardRef<TextInput, UserInputProps>(({
     variant = 'standard',
     label,
     bg,
     br = 10,
     stroke = 1,
     labelColor,
-    textVariant = {
-        label: 'h5',
-        helperText: 'h6',
+    textScale = {
+        label: 'sm',
+        inputText: 'sm',
+        helperText: 'xs',
     },
     inputTextColor,
     strokeColor,
     cursorColor,
     placeholderColor,
-    inputFs = 13,
+    inputFs,
     labelFs,
     helperTextFS,
     placeholder = 'Please enter...',
     disabled = false,
     isError = false,
-    helperText = '',
+    helperText,
     multiline = false,
     renderLeftIcon,
     renderRightIcon,
     styles,
-    ref,
     ...rest
-}) => {
+}, ref) => {
+
+    const [isFocused, setIsFocused] = useState(false);
 
     const theme: any = useTheme();
+    const STYLES = useMemo(Styles, []);
 
     const {
         computedCursorColor,
@@ -48,23 +51,24 @@ const UserInput: React.FC<UserInputProps> = ({
     const dynamicStyles = {
         INPUT_CONT: {
             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,
+            backgroundColor: disabled && theme.colors.states.disabled || isFocused && theme.colors.states.focus || (bg ?? theme.colors.background.default),
+            borderColor: isError && theme.colors.semantic.danger || isFocused && theme.colors.brand.primary || (strokeColor ?? theme.colors.border.default),
             borderWidth: variant === 'standard' ? 0 : stroke,
             borderBottomWidth: stroke,
             borderRadius: verticalScale(br),
-            height: multiline ? undefined : verticalScale(48),
+            height: multiline ? undefined : verticalScale(47),
             paddingVertical: multiline ? horizontalScale(10) : undefined,
         },
         INPUT: {
-            color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
-            fontSize: responsiveFontSize(inputFs),
+            color: disabled ? theme.colors.typography.disabled : isError ? theme.colors.semantic.danger : inputTextColor ?? theme.colors.typography.primary,
+            //@ts-ignore
+            fontSize: responsiveFontSize(inputFs ?? theme.sizes.typography[textScale.inputText]),
             textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
             minHeight: multiline ? 100 : undefined,
             maxHeight: multiline ? 150 : undefined,
         },
         ERROR_HELPER_TEXT: {
-            color: theme.colors.error,
+            color: theme.colors.semantic.danger,
         }
     };
 
@@ -72,7 +76,7 @@ const UserInput: React.FC<UserInputProps> = ({
         <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
             {
                 label &&
-                <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
+                <StyledText fScale={textScale?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
             }
             <StyledView
                 style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
@@ -88,6 +92,8 @@ const UserInput: React.FC<UserInputProps> = ({
                     editable={!disabled}
                     multiline={multiline}
                     cursorColor={computedCursorColor}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
                     {...rest}
                 />
                 {
@@ -97,7 +103,7 @@ const UserInput: React.FC<UserInputProps> = ({
             {
                 (isError && helperText) &&
                 <StyledText
-                    variant={textVariant?.helperText}
+                    fScale={textScale?.helperText}
                     fs={helperTextFS}
                     style={[
                         STYLES.ERROR_HELPER_TEXT,
@@ -110,11 +116,11 @@ const UserInput: React.FC<UserInputProps> = ({
             }
         </StyledView>
     </>)
-};
+});
 export default UserInput;
 export type { UserInputProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     INPUT_CONT: {
         flexDirection: 'row',
         paddingHorizontal: horizontalScale(14),

package/src/components/UserInput/generateColors.ts

@@ -2,9 +2,9 @@ import type { ThemeTypes } from "../../types";
 
 
 const generateColors = (theme: ThemeTypes, isError: boolean, cursorColor?: string, placeholderColor?: string, labelColor?: string) => {
-    const computedCursorColor = isError ? theme.colors.error : (cursorColor ?? theme.colors.cursorColor);
-    const computedPlaceholderColor = placeholderColor ?? theme.colors.placeholderColor;
-    const computedLabelColor = isError ? theme.colors.error : labelColor ?? theme.colors.textTertiary;
+    const computedCursorColor = isError ? theme.colors.semantic.danger : (cursorColor ?? theme.colors.brand.primary);
+    const computedPlaceholderColor = placeholderColor ?? theme.colors.typography.tertiary;
+    const computedLabelColor = isError ? theme.colors.semantic.danger : labelColor ?? theme.colors.typography.primary;
     return {
         computedCursorColor,
         computedPlaceholderColor,

package/src/constants/typographySizes.ts

@@ -1,21 +1,19 @@
 type typographySizeTypes = {
-    h1: number,
-    h2: number,
-    h3: number,
-    h4: number,
-    h6: number,
-    h5: number,
-    h7: number,
+    [key: string]: number
 }
 
-const typographySizes: typographySizeTypes = {
-    h1: 32,
-    h2: 24,
-    h3: 18,
-    h4: 16,
-    h5: 14,
-    h6: 12,
-    h7: 10,
+const typographySizes: Record<string, number> = {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 24,
+    '2xl': 28,
+    '3xl': 32,
+    '4xl': 36,
+    '5xl': 45,
+    '6xl': 57,
 }
 
 export default typographySizes;