@nexara/nativeflow 0.1.7 → 0.1.8

package/src/components/CheckBox/CheckBox.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type FC } from "react";
 import { StyleSheet, TouchableWithoutFeedback, Animated, type ViewStyle } from "react-native";
 import { StyledText, StyledView } from "../StyledComponents";
 import { useTheme } from "../../hooks";
-import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import { horizontalScale, verticalScale } from "../../helpers";
 import { Check } from "../../assets/svg";
 import type { CheckBoxProps } from "../../types";
 
 
-const CheckBox: React.FC<CheckBoxProps> = ({
+const CheckBox: FC<CheckBoxProps> = ({
     variant = 'square',
     isChecked = false,
     defaultValue = false,
@@ -16,13 +16,15 @@ const CheckBox: React.FC<CheckBoxProps> = ({
     iconColor,
     disableBuiltInState = false,
     disabled = false,
-    text,
+    label = 'Checkbox',
+    fScale = 'xs',
     fs,
-    textVariant = 'h6',
+    ff,
+    // size = 22,
     size = 20,
     iconSize,
     containerStyle,
-    textStyle,
+    labelStyle,
     checkBoxStyle,
     onPress,
 }) => {
@@ -33,19 +35,19 @@ const CheckBox: React.FC<CheckBoxProps> = ({
     }, [defaultValue]);
 
     const STYLES = useMemo(Styles, []);
-    
+
     const scaleVal = useRef(new Animated.Value(1)).current;
     const { colors }: any = useTheme();
-    activeBgColor = disabled ? colors.disable : activeBgColor ?? colors.primary;
+    activeBgColor = disabled ? colors.states.disabled : activeBgColor ?? colors.brand.primary;
     iconSize = iconSize ?? size / 1.5;
     const bgColor = (!disableBuiltInState && isCheckboxChecked) || (disableBuiltInState && isChecked) ? activeBgColor : inActiveBgColor;
-    const textColor = disabled ? colors.textDisable : colors.textPrimary;
+    const textColor = disabled ? colors.typography.disabled : colors.typography.primary;
 
     const dynamicMainContStyles: ViewStyle = {
         height: verticalScale(size),
         width: verticalScale(size),
-        borderColor: disabled ? colors.disable : activeBgColor,
-        borderRadius: variant === 'square' ? 5 : verticalScale(size),
+        borderColor: disabled ? colors.border.default : activeBgColor,
+        borderRadius: verticalScale(variant === 'square' ? 5 : size),
         backgroundColor: bgColor
     };
 
@@ -70,32 +72,32 @@ const CheckBox: React.FC<CheckBoxProps> = ({
         }
     };
     return (
-        <StyledView>
+        // <StyledView>
+        <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+
             <TouchableWithoutFeedback
                 onPressIn={() => animateScale(0.8)}
                 onPressOut={() => animateScale(1)}
                 onPress={onUserClick}
                 disabled={disabled}
             >
-                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
-
-                    <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle]}>
-                        {
-                            (disableBuiltInState ? isChecked : isCheckboxChecked) &&
-                            <Check
-                                color={iconColor ?? colors.iconSecondary}
-                                size={verticalScale(iconSize)}
-                            />
-                        }
-                    </Animated.View>
+                <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle]}>
                     {
-                        text &&
-                        <StyledText style={textStyle} fs={fs} color={textColor} variant={textVariant} primary>{text}</StyledText>
+                        (disableBuiltInState ? isChecked : isCheckboxChecked) &&
+                        <Check
+                            color={disabled ? colors.states.disabled : iconColor ?? colors.brand.onPrimary}
+                            size={verticalScale(iconSize)}
+                        />
                     }
-
-                </StyledView>
+                </Animated.View>
             </TouchableWithoutFeedback>
+            {
+                label &&
+                <StyledText style={labelStyle} fs={fs} ff={ff} color={textColor} fScale={fScale}>{label}</StyledText>
+            }
+
         </StyledView>
+        // </StyledView>
     )
 }
 export default CheckBox;
@@ -111,6 +113,6 @@ const Styles = () => StyleSheet.create({
         borderWidth: 0.8,
         alignItems: 'center',
         justifyContent: 'center',
-        padding: verticalScale(7)
+        padding: horizontalScale(7)
     }
 });

package/src/components/Chip/Chip.tsx

@@ -1,21 +1,23 @@
-import React from 'react';
-import { StyleSheet, Pressable, TouchableOpacity } from 'react-native';
+import React, { type FC } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { StyledText, StyledView } from '../StyledComponents';
 import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from '../../hooks';
 import { getChipColors } from './utils';
 import type { ChipProps } from '../../types';
 
-const Chip: React.FC<ChipProps> = ({
-    title = 'Chip',
-    bg,
-    titleColor,
+const Chip: FC<ChipProps> = ({
+    label = 'Chip',
+    labelColor,
     fs,
+    fScale = 'sm',
+    ff,
+    bg,
     br = 7,
     gap = 7,
-    paddingV = 9,
-    paddingH = 13,
-    stroke = 0.9,
+    paddingV = 6,
+    paddingH = 15,
+    stroke = 0.8,
     strokeColor,
     rippleColor,
     disabled = false,
@@ -23,6 +25,7 @@ const Chip: React.FC<ChipProps> = ({
     renderRightIcon,
     containerStyle,
     textStyle,
+    active = false,
     ...rest
 }) => {
 
@@ -31,9 +34,10 @@ const Chip: React.FC<ChipProps> = ({
     const { buttonTextColor, buttonBorderColor, backgroundColor } = getChipColors({
         theme,
         bg,
-        titleColor,
+        labelColor,
         strokeColor,
-        disabled
+        disabled,
+        active
     });
 
     const STYLES = StyleSheet.create({
@@ -45,7 +49,8 @@ const Chip: React.FC<ChipProps> = ({
             backgroundColor: backgroundColor,
             borderRadius: verticalScale(br),
             paddingVertical: verticalScale(paddingV),
-            paddingHorizontal: horizontalScale(paddingH),
+            paddingLeft: horizontalScale((renderLeftIcon && paddingH / 2) ?? paddingH),
+            paddingRight: horizontalScale((renderRightIcon && paddingH / 2) ?? paddingH),
             gap: horizontalScale(gap)
         },
         TEXT: {
@@ -54,34 +59,21 @@ const Chip: React.FC<ChipProps> = ({
     });
     return (<>
         <StyledView alignSelf='flex-start'>
-            <Pressable
-                android_ripple={{
-                    color: rippleColor,
-                }}
-                {...rest}
+            <TouchableOpacity
                 disabled={disabled}
+                {...rest}
             >
                 <StyledView style={[STYLES.CONTAINER, containerStyle]}>
                     {
-                        renderLeftIcon &&
-                        <TouchableOpacity
-                            disabled={disabled}
-                        >
-                            {renderLeftIcon}
-                        </TouchableOpacity>
+                        React.isValidElement(renderLeftIcon) && renderLeftIcon
                     }
-                    <StyledText primary variant='h5' fs={fs} style={[STYLES.TEXT, textStyle]}>{title}</StyledText>
+                    <StyledText fScale={fScale} ff={ff} fs={fs} style={[STYLES.TEXT, textStyle]}>{label}</StyledText>
                     {
-                        renderRightIcon &&
-                        <TouchableOpacity
-                            disabled={disabled}
-                        >
-                            {renderRightIcon}
-                        </TouchableOpacity>
+                        React.isValidElement(renderRightIcon) && renderRightIcon
                     }
                 </StyledView>
 
-            </Pressable>
+            </TouchableOpacity>
         </StyledView>
     </>);
 }

package/src/components/Chip/utils.ts

@@ -1,89 +1,103 @@
+import Color from "color";
 import type { ThemeTypes } from "../../types";
 
 const getBorderColor = ({
     theme,
     strokeColor,
     disabled,
+    active
 }: {
     theme: ThemeTypes;
     strokeColor: string | undefined;
     disabled: boolean;
+    active: boolean;
 }) => {
     if (disabled) {
-        return theme.colors.disable;
-    }
-    if (strokeColor) {
+        return theme.colors.border.strong;
+    } else if (strokeColor) {
         return strokeColor
+    } else if (active) {
+        return Color(theme.colors.brand.primary).alpha(0.3).rgb().toString();
     }
-    return theme.colors.outline;
+    return theme.colors.border.default;
 };
 
 
 const getTextColor = ({
     theme,
-    titleColor,
+    labelColor,
     disabled
 }: {
     theme: ThemeTypes;
-    titleColor: string | undefined;
+    labelColor: string | undefined;
     disabled: boolean;
 }) => {
     if (disabled) {
-        return theme.colors.textDisable;
+        return theme.colors.typography.disabled;
     }
-    else if (titleColor) {
-        return titleColor;
+    else if (labelColor) {
+        return labelColor;
     }
-    return theme.colors.textTertiary;
+    return theme.colors.typography.secondary;
 };
 
 const getBgColor = ({
     theme,
     bg,
-    disabled
+    disabled,
+    active
 }: {
     theme: ThemeTypes;
     bg: string | undefined;
     disabled: boolean;
+    active: boolean;
 }) => {
     if (disabled) {
-        return theme.colors.disable;
-    }
-    else if (bg) {
+        return theme.colors.states.disabled;
+    } else if (bg) {
         return bg
+    } else if (active) {
+        return Color(theme.colors.brand.primary).alpha(0.1).rgb().toString();
     }
-    return theme.colors.chipBgColor;
+    return 'transparent'
+    // return theme.colors.background.default
+    // return Color(theme.colors.brand.primary).alpha(0.2).rgb().toString();
+    // return Color(theme.colors.brand.primary).alpha(0.1).rgb().toString();
 };
 
 const getChipColors = ({
     theme,
     bg,
-    titleColor,
+    labelColor,
     strokeColor,
-    disabled
+    disabled,
+    active
 }: {
     theme: ThemeTypes;
     bg: string | undefined;
-    titleColor: string | undefined;
+    labelColor: string | undefined;
     strokeColor: string | undefined;
     disabled: boolean;
+    active: boolean;
 }) => {
 
 
     const backgroundColor = getBgColor({
         theme,
         bg,
-        disabled
+        disabled,
+        active
     });
     const buttonTextColor = getTextColor({
         theme,
-        titleColor,
+        labelColor,
         disabled
     });
     const buttonBorderColor = getBorderColor({
         theme,
         strokeColor,
         disabled,
+        active
     });
 
     return {

package/src/components/Dialog/Dialog.tsx

@@ -5,15 +5,15 @@ import type { ViewStyle } from 'react-native';
 import { dialogSizes } from '../../constants';
 import Portal from '../Portal/Portal';
 import type { DialogProps, DialogRefProps } from '../../types';
+import { useTheme } from '../../hooks';
+import { verticalScale } from '../../helpers';
 
 
 const Dialog = forwardRef<DialogRefProps, DialogProps>(({
-    variant = 'default',
+    variant = 'classic',
     size = 'lg',
     fullScreen,
-    backdropColor = 'rgba(0, 0, 0, 0.5)',
-    // backdropColor = 'red',
-    // animationDuration = 800,
+    backdropColor,
     onClose,
     containerStyle,
     children,
@@ -22,6 +22,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     const [dialogVisible, setDialogVisible] = useState(false);
     const scale = useRef(new Animated.Value(0.9)).current;
     const opacity = useRef(new Animated.Value(0)).current;
+    const theme = useTheme();
 
     useEffect(() => {
         Animated.timing(opacity, {
@@ -54,7 +55,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
 
     const backdropAnimatedStyles = {
         opacity: opacity,
-        backgroundColor: backdropColor,
+        backgroundColor:  backdropColor ?? theme?.colors.background.backdrop,
     };
     const modalContAnimatedStyles = {
         transform: [{ scale }],
@@ -64,6 +65,9 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
         minHeight: fullScreen ? '100%' : 'auto',
         maxHeight: fullScreen ? '100%' : '80%',
         width: `${dialogSizes[size]}%`,
+        backgroundColor:theme?.colors.background.elevated,
+        borderColor:  theme?.colors.border.default,
+        borderRadius: verticalScale(40)
     };
 
     const renderChildrenWithVariant = () => {
@@ -113,9 +117,9 @@ const STYLES = StyleSheet.create({
         alignItems: 'center',
     },
     MODAL_CONT: {
-        backgroundColor: '#fff',
+        // backgroundColor: '#fff',
         borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#d4d4d4'
+        // borderColor: '#d4d4d4'
     }
 });

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,38 +1,36 @@
-import React, { useMemo } 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 STYLES = useMemo(Styles, []);
-    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,39 +1,36 @@
-import React, { useMemo } 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>
     </>);
 }
@@ -43,13 +40,11 @@ export type { DialogHeadProps };
 
 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;