@nexara/nativeflow 0.1.7 → 0.1.8

package/src/components/Icon/Icon.tsx

@@ -19,7 +19,7 @@ const Icon: React.FC<IconProps> = ({
             {
                 ...renderIcon?.props,
                 size: verticalScale(renderIcon?.props?.size ?? 17),
-                color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
+                color: color ?? (renderIcon?.props.color ?? theme?.colors.typography.secondary)
             }
         )
     }, [color, theme, renderIcon.props]);

package/src/components/IconButton/IconButton.tsx

@@ -21,7 +21,7 @@ const IconButton: React.FC<IconButtonProps> = ({
     if (!(isValidElement(children) && 'size' in children.props)) {
         return;
     }
-    size = children.props.size * 1.5;
+    size = children.props.size! * 1.5;
 
     return (<>
         <TouchableOpacity
@@ -31,7 +31,7 @@ const IconButton: React.FC<IconButtonProps> = ({
                 height: size,
                 width: size,
                 justifyContent: 'center',
-                alignItems: 'center'
+                alignItems: 'center',
             }, style]}
             {...rest}
         >

package/src/components/Link/Link.tsx

@@ -1,22 +1,14 @@
-import type React from "react";
+import { useCallback, type FC } from "react";
 import { StyledText } from "../StyledComponents";
-import { Linking, StyleSheet, TouchableOpacity, type TextStyle } from "react-native";
-import { useCallback } from "react";
-import type { TypographyVariant } from "../../types";
+import { Linking, StyleSheet } from "react-native";
+import type { LinkProps } from "../../types";
 
 
-type props = {
-    title: string;
-    href: string;
-    textVariant?: TypographyVariant;
-    style?: TextStyle
-}
-
-const Link: React.FC<props> = ({
-    title = '',
+const Link: FC<LinkProps> = ({
+    title = 'Link',
     href,
-    textVariant = 'h5',
-    style
+    style,
+    ...rest
 }) => {
     const onUserPress = useCallback(async () => {
         const supported = await Linking.canOpenURL(href);
@@ -24,25 +16,24 @@ const Link: React.FC<props> = ({
             await Linking.openURL(href);
         }
     }, [href]);
-    return (<>
-        <TouchableOpacity onPress={onUserPress}>
-            <StyledText
-                variant={textVariant}
-                color='#0000FF'
-                style={[STYLES.TEXT, style]}
-            >
-                {title}
-            </StyledText>
-        </TouchableOpacity>
-    </>)
+    return (
+        <StyledText
+            color='#0000FF'
+            style={[STYLES.TEXT, style]}
+            onPress={onUserPress}
+            {...rest}
+        >
+            {title}
+        </StyledText>
+    )
 }
 
 export default Link;
 
 const STYLES = StyleSheet.create({
     TEXT: {
-        borderBottomColor: '#0000FF',
-        borderBottomWidth: 0.8,
-        alignSelf: 'flex-start',
+        // borderBottomColor: '#0000FF',
+        // borderBottomWidth: 0.8,
+        // alignSelf: 'flex-start',
     }
 });

package/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect, useMemo, } from "react";
+import React, { useState, useRef, useCallback, useEffect, useMemo, type FC, } from "react";
 import { StyleSheet, Pressable, View, ScrollView, Animated } from "react-native";
 import { StyledView } from "../StyledComponents";
 import Portal from "../Portal/Portal";
@@ -6,8 +6,9 @@ import { positionCalculations } from "./calculations";
 import type { menuLayoutTypes, anchorLayoutTypes } from "./calculations";
 import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
 import type { MenuProps } from "../../types";
+import { useTheme } from "../../hooks";
 
-const Menu: React.FC<MenuProps> = ({
+const Menu: FC<MenuProps> = ({
     placement = 'top',
     anchor,
     disableBuiltInState = false,
@@ -23,6 +24,7 @@ const Menu: React.FC<MenuProps> = ({
     const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
     const buttonRef = useRef<View>(null!);
     const animatedScaleRef = useRef(new Animated.Value(1)).current;
+    const theme  = useTheme();
 
     const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
     const STYLES = useMemo(Styles, []);
@@ -85,6 +87,7 @@ const Menu: React.FC<MenuProps> = ({
     const dynamicStyles = {
         left: positions.left,
         top: positions.top,
+        backgroundColor: theme?.colors.background.elevated
     };
 
     const menuAnimatedStyle = {
@@ -93,7 +96,6 @@ const Menu: React.FC<MenuProps> = ({
     };
 
     return (<>
-
         <Portal
             name='Menu'
         >
@@ -111,10 +113,11 @@ const Menu: React.FC<MenuProps> = ({
             </Pressable>
         </Portal>
 
-        <StyledView alignItems='flex-start' ref={buttonRef} onLayout={measureLayout}>
-            {anchor && React.isValidElement<{ onPress: () => void }>(anchor) && React.cloneElement(anchor, { onPress: onOpen })}
+        <StyledView>
+            <StyledView ref={buttonRef} onLayout={measureLayout} alignSelf='flex-start'>
+                {anchor && React.isValidElement<{ onPress: () => void }>(anchor) && React.cloneElement(anchor, { onPress: onOpen})}
+            </StyledView>
         </StyledView>
-
     </>)
 }
 export default Menu;

package/src/components/Menu/MenuItem.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import { type FC } from "react";
 import { TouchableOpacity } from "react-native";
 import { StyledView } from "../StyledComponents";
-import { horizontalScale, moderateScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
 import type { MenuItemProps } from "../../types";
 
-const MenuItem: React.FC<MenuItemProps> = ({
+const MenuItem: FC<MenuItemProps> = ({
     paddingV = 11,
     paddingH = 17,
     gap = 12,
-    style,
+    itemStyle,
     children,
     ...rest
 }) => {
@@ -22,8 +22,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
                 paddingVertical={verticalScale(paddingV)}
                 flexDirection='row'
                 align="center"
-                gap={moderateScale(gap)}
-                style={style}
+                gap={horizontalScale(gap)}
+                style={itemStyle}
             >
                 {children}
             </StyledView>

package/src/components/Menu/MenuItemLabel.tsx

@@ -1,22 +1,17 @@
-import React from "react";
+import { type FC } from "react";
 import { StyledText } from "../StyledComponents";
 import type { MenuItemLabelProps } from "../../types";
 
-const MenuItemLabel: React.FC<MenuItemLabelProps> = ({
-    fs,
-    style,
+const MenuItemLabel: FC<MenuItemLabelProps> = ({
     children,
-    textVariant = 'h5',
     ...rest
 }) => {
-
     return (<>
         <StyledText
-            fs={fs}
-            variant={textVariant}
-            color="#000"
             numberOfLines={1}
             flexShrink={1}
+            fScale='sm'
+            variant='secondary'
             {...rest}
         >
             {children}

package/src/components/Progress/Progress.tsx

@@ -1,20 +1,21 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, type FC } from 'react';
 import { Animated, StyleSheet } from "react-native";
-import { moderateScale, verticalScale, } from "../../helpers/ResponsiveCalculations";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
 import type { ProgressProps } from '../../types';
 
-const Progress: React.FC<ProgressProps> = ({
+const Progress: FC<ProgressProps> = ({
     value = 50,
     thickness = 5,
     br = 100,
-    trackColor = '#E8E8E8',
+    trackColor,
     progressColor,
 }) => {
 
     const animatedWidth = useRef(new Animated.Value(value)).current;
     const theme = useTheme();
+    trackColor  = theme?.colors.palette.natural[200];
 
     useEffect(() => {
         Animated.timing(animatedWidth, {
@@ -27,12 +28,12 @@ const Progress: React.FC<ProgressProps> = ({
     const dynamicStyles = useMemo(() => ({
         TRACK: {
             backgroundColor: trackColor,
-            borderRadius: moderateScale(br),
+            borderRadius: verticalScale(br),
             height: verticalScale(thickness),
         },
         TRACK_ITEM: {
-            backgroundColor: progressColor ?? theme?.colors.primary,
-            borderRadius: moderateScale(br),
+            backgroundColor: progressColor ?? theme?.colors.brand.primary,
+            borderRadius: verticalScale(br),
         }
     }), [br, trackColor, thickness, progressColor, theme]);
 

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

@@ -18,8 +18,8 @@ const StyledView = forwardRef<View, StyledViewProps>(({
     ...rest
 }, ref) => {
 
-    const theme = useTheme(themeBg);
-
+    const theme = useTheme();
+    
     return (
         <View
             style={[{
@@ -27,14 +27,14 @@ const StyledView = forwardRef<View, 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,
             },
                 style
             ]}
-            {...rest}
             ref={ref}
+            {...rest}
         >
             {children}
         </View>

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}
         />