@nexara/nativeflow 0.1.6 → 0.1.8

package/src/components/Dialog/DialogBody.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import { View, ScrollView } from 'react-native';
-import { moderateScale } from '../../helpers/ResponsiveCalculations';
-import type { DialogBodyProps } from '../../types';
+import { type FC } from 'react';
+import { ScrollView } from 'react-native';
+import { horizontalScale, verticalScale } from '../../helpers/ResponsiveCalculations';
+import type { DialogBodyProps, StyledViewProps } from '../../types';
+import { StyledView } from '../StyledComponents';
 
 
-interface props extends DialogBodyProps {
-    variant?: 'classic' | 'default';
+interface props extends DialogBodyProps, StyledViewProps  {
+    variant?: 'classic' | 'default';    
 }
 
-const DialogBody: React.FC<props> = ({
+const DialogBody: FC<props> = ({
     variant,
     scrollEnable = true,
     containerStyle,
     children,
+    ...rest
 }) => {
     const style = {
-        paddingVertical: variant == 'default' ? moderateScale(16) : 0,
-        paddingHorizontal: moderateScale(variant == 'default' ? 16 : 25),
-        gap: 20,
+        paddingVertical: variant == 'default' ? verticalScale(16) : 0,
+        paddingHorizontal: horizontalScale(variant == 'default' ? 16 : 25),
     };
     return (<>
-
         <ScrollView scrollEnabled={scrollEnable}>
-            <View style={[style, containerStyle]} pointerEvents='box-none'>
+            <StyledView style={[style, containerStyle]} pointerEvents='box-none' {...rest}>
                 {children}
-            </View>
+            </StyledView>
         </ScrollView>
     </>);
 }

package/src/components/Dialog/DialogDescription.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
+import { type FC } from 'react';
 import { View } from 'react-native';
-import { moderateVerticalScale } from '../../helpers/ResponsiveCalculations';
+import { verticalScale } from '../../helpers/ResponsiveCalculations';
 import { StyledText } from '../StyledComponents';
 import type { DialogDescriptionProps } from '../../types';
 
-const DialogDescription: React.FC<DialogDescriptionProps> = ({
-    textVariant = 'h5',
-    fs,
+const DialogDescription: FC<DialogDescriptionProps> = ({
+    fScale = 'sm',
     containerStyle,
     textStyle,
     children,
+    ...rest
 }) => {
     return (<>
         <View style={containerStyle}>
             <StyledText
-                style={[{ lineHeight: moderateVerticalScale(13) }, textStyle]}
-                color='#a1a1aa'
-                variant={textVariant}
-                fs={fs}
+                style={[{ lineHeight: verticalScale(20) }, textStyle]}
+                variant='tertiary'
+                fScale={fScale}
+                {...rest}
             >
                 {children}
             </StyledText>

package/src/components/Dialog/DialogFoot.tsx

@@ -1,37 +1,36 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import Stack from '../Stack';
-import { moderateScale } from '../../helpers/ResponsiveCalculations';
+import { type FC } from 'react';
+import { type ViewStyle } from 'react-native';
+import { horizontalScale, verticalScale } from '../../helpers/ResponsiveCalculations';
 import type { DialogFootProps } from '../../types';
+import { useTheme } from '../../hooks';
+import { StyledView } from '../StyledComponents';
 
 
 interface props extends DialogFootProps {
     variant?: 'classic' | 'default';
 }
 
-const DialogFoot: React.FC<props> = ({
+const DialogFoot: FC<props> = ({
     variant,
     containerStyle,
-    children
+    children,
+    ...rest
 }) => {
-    const dynamicStyles = {
+    const theme = useTheme();
+
+    const dynamicStyles: ViewStyle = {
         borderTopWidth: variant === 'default' ? 0.7 : 0,
-        padding: moderateScale(variant === 'default' ? 16 : 20),
-        paddingHorizontal: moderateScale(variant === 'default' ? 16 : 25),
+        borderColor: theme?.colors.border.subtle,
+        padding: verticalScale(variant === 'default' ? 16 : 20),
+        paddingHorizontal: horizontalScale(variant === 'default' ? 16 : 25),
+        justifyContent: 'flex-end',
+        flexDirection: 'row'
     };
     return (<>
-        <Stack.H style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
+        <StyledView style={[dynamicStyles, containerStyle]} {...rest}>
             {children}
-        </Stack.H>
+        </StyledView>
     </>);
 }
 export default DialogFoot;
-export type { DialogFootProps };
-
-const STYLES = StyleSheet.create({
-    CONTAINER: {
-        borderColor: '#d4d4d4',
-        justifyContent: 'flex-end',
-        gap: moderateScale(15)
-    },
-});
+export type { DialogFootProps };

package/src/components/Dialog/DialogHead.tsx

@@ -1,38 +1,36 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { moderateScale } from '../../helpers/ResponsiveCalculations';
-import { X } from '../../assets/svg';
+import { useMemo, type FC } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { verticalScale } from '../../helpers/ResponsiveCalculations';
 import { StyledText } from '../StyledComponents';
 import type { DialogHeadProps } from '../../types';
+import { useTheme } from '../../hooks';
 
 
 interface props extends DialogHeadProps {
     variant?: 'classic' | 'default';
 }
 
-const DialogHead: React.FC<props> = ({
+const DialogHead: FC<props> = ({
     variant = 'default',
-    title = 'Title',
-    textVariant = 'h4',
+    title,
+    fScale = 'xl',
     fs,
+    ff,
     containerStyle,
-    textStyle,
+    titleStyle,
     children
 }) => {
+    const theme = useTheme();
+    const STYLES = useMemo(Styles, []);
+
     const dynamicStyles = {
         borderBottomWidth: variant == 'default' ? 0.7 : 0,
-        padding: moderateScale(variant === 'default' ? 16 : 25),
+        borderColor: theme?.colors.border.subtle,
+        padding: verticalScale(variant === 'default' ? 16 : 25),
     };
     return (<>
-
         <View style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
-            <View>
-                <StyledText style={[STYLES.HEADER_TEXT, textStyle]} fs={fs} variant={textVariant}>{title}</StyledText>
-                {children}
-            </View>
-            <TouchableOpacity>
-                <X color='gray' size={moderateScale(20)} />
-            </TouchableOpacity>
+            <StyledText style={[STYLES.HEADER_TEXT, titleStyle]} fs={fs} ff={ff} fScale={fScale}>{title || children}</StyledText>
         </View>
     </>);
 }
@@ -40,15 +38,13 @@ export default DialogHead;
 export type { DialogHeadProps };
 
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     CONTAINER: {
-        borderColor: '#d4d4d4',
-        paddingBottom: moderateScale(16),
+        paddingBottom: verticalScale(16),
         justifyContent: 'space-between',
         flexDirection: 'row',
     },
     HEADER_TEXT: {
         fontWeight: 'bold',
-        color: '#000',
     }
 });

package/src/components/Divider/Divider.tsx

@@ -1,30 +1,22 @@
-import React from 'react';
-import type { ViewStyle, StyleProp } from "react-native";
+import { type FC } from 'react';
 import { StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
+import type { DividerProps } from '../../types';
 
 
-type DividerProps = {
-    thickness?: number;
-    style?: StyleProp<ViewStyle>
-    color?: string;
-}
-
-const Divider: React.FC<DividerProps> = ({
-    thickness = 0.2,
+const Divider: FC<DividerProps> = ({
+    thickness = 0.7,
     color,
     style
 }) => {
-
     const theme = useTheme();
-
     const dynamicStyles = {
         borderWidth: thickness,
-        borderColor: color ?? theme?.colors.dividerColor
+        borderColor: color ?? theme?.colors.border.subtle
     };
-    return (<>
+    return (
         <StyledView style={[dynamicStyles, style]} />
-    </>);
+    );
 };
 export default Divider;
 export type { DividerProps };

package/src/components/Grid/Grid.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
-import { View, StyleSheet } from "react-native";
+import { useMemo, type FC } from 'react';
+import { StyleSheet } from "react-native";
 import { getGridValue } from '../../helpers';
 import { useConditionalWindowDimension } from '../../hooks';
 import type { GridProps } from '../../types';
+import { StyledView } from '../StyledComponents';
 
-const Grid: React.FC<GridProps> = ({
+const Grid: FC<GridProps> = ({
     container = false,
     item = false,
     spacing = 0,
@@ -48,12 +49,12 @@ const Grid: React.FC<GridProps> = ({
         },
     });
     return (<>
-        <View
+        <StyledView
             style={[STYLES.MAIN_CONT, containerStyle]}
             {...rest}
         >
             {children}
-        </View>
+        </StyledView>
     </>);
 };
 export default Grid;

package/src/components/Icon/Icon.tsx

@@ -18,11 +18,11 @@ const Icon: React.FC<IconProps> = ({
         return React.cloneElement(renderIcon as React.ReactElement<any>,
             {
                 ...renderIcon?.props,
-                size: verticalScale(renderIcon?.props?.size ?? 15),
-                color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
+                size: verticalScale(renderIcon?.props?.size ?? 17),
+                color: color ?? (renderIcon?.props.color ?? theme?.colors.typography.secondary)
             }
         )
-    }, [color, theme]);
+    }, [color, theme, renderIcon.props]);
 
     return (<>
         {renderCallBackIcon}

package/src/components/IconButton/IconButton.tsx

@@ -1,35 +1,44 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React, { isValidElement } from "react";
+import type { ReactElement } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import { StyledView } from "../StyledComponents";
-// import TouchableRipple from "../TouchableRipple/TouchableRipple";
 import Icon from "../Icon/Icon";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
 
 
 type IconButtonProps = TouchableOpacityProps & {
     rippleColor?: string;
-    children?: ReactNode;
+    children?: ReactElement<{ size: number }>;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
     rippleColor,
     children,
+    style,
     ...rest
 }) => {
 
+    let size = 40;
+
+    if (!(isValidElement(children) && 'size' in children.props)) {
+        return;
+    }
+    size = children.props.size! * 1.5;
+
     return (<>
-        <StyledView style={{ alignSelf: 'flex-start' }}>
-            <TouchableOpacity
-                // rippleColor={rippleColor}
-                style={{ borderRadius: 100, padding: verticalScale(8) }}
-                {...rest}
-            >
-                <Icon
-                    renderIcon={React.cloneElement(children as React.ReactElement<any>)}
-                />
-            </TouchableOpacity>
-        </StyledView>
+        <TouchableOpacity
+            // rippleColor={rippleColor}
+            style={[{
+                borderRadius: 100,
+                height: size,
+                width: size,
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, style]}
+            {...rest}
+        >
+            <Icon
+                renderIcon={React.cloneElement(children as React.ReactElement<any>)}
+            />
+        </TouchableOpacity>
     </>)
 }
 export default IconButton;

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, } 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,8 +24,10 @@ 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, []);
 
     useEffect(() => {
         Animated.timing(animatedScaleRef, {
@@ -84,6 +87,7 @@ const Menu: React.FC<MenuProps> = ({
     const dynamicStyles = {
         left: positions.left,
         top: positions.top,
+        backgroundColor: theme?.colors.background.elevated
     };
 
     const menuAnimatedStyle = {
@@ -92,7 +96,6 @@ const Menu: React.FC<MenuProps> = ({
     };
 
     return (<>
-
         <Portal
             name='Menu'
         >
@@ -110,16 +113,17 @@ 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;
 export type { MenuProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     MENU_CONT: {
         shadowColor: "#000",
         backgroundColor: '#fff',

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/Provider/ContextManager.tsx

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