@nexara/nativeflow 0.1.6 → 0.1.8

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { JSX } from 'react';
+import React, { useMemo } from 'react';
+import type { FC, JSX } from 'react';
 import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
 import { StyledText, StyledView } from '../StyledComponents';
@@ -8,35 +8,36 @@ import { getButtonColors } from './utils';
 import type { ButtonProps } from '../../types';
 
 
-const Button: React.FC<ButtonProps> = ({
+const Button: FC<ButtonProps> = ({
     variant = 'contained',
     type = 'flat',
     fullWidth = false,
     paddingH = 19,
-    paddingV = 14,
+    paddingV = 12,
     bg,
-    br = 5,
+    br = 8,
     stroke = 1,
     strokeColor,
     titleColor,
-    title = 'Button',
-    titleFS,
-    titleVariant = 'h5',
-    titleFF,
+    title,
+    fScale = 'base',
+    fs,
+    ff,
     size = 50,
     rippleColor,
     renderIcon,
     renderLeftIcon,
     renderRightIcon,
     disabled = false,
-    buttonContainerStyle,
-    textStyle,
+    containerStyle,
+    titleStyle,
     onPress,
+    children,
     ...rest
 }) => {
     const theme: any = useTheme();
 
-    const { backgroundColor, buttonTextColor, buttonBorderColor, buttonIconColor } = getButtonColors({
+    const { backgroundColor, buttonTextColor, buttonBorderColor } = getButtonColors({
         theme,
         variant,
         bg,
@@ -44,6 +45,9 @@ const Button: React.FC<ButtonProps> = ({
         strokeColor,
         disabled
     });
+
+    const STYLES = useMemo(customStyles, []);
+
     const dynamicStyles = {
         BUTTON_CONT: {
             backgroundColor: backgroundColor,
@@ -52,7 +56,7 @@ const Button: React.FC<ButtonProps> = ({
         },
         BUTTON_TEXT: {
             color: buttonTextColor,
-            fontFamily: titleFF ?? '',
+            fontFamily: ff ?? '',
         },
         FLAT_BTN_MAIN_CONT: {
             borderRadius: verticalScale(br),
@@ -72,7 +76,7 @@ const Button: React.FC<ButtonProps> = ({
     const cloneElement = (element: JSX.Element): JSX.Element | null => {
         if (React.isValidElement<{ color?: string }>(element)) {
             return React.cloneElement(element, {
-                color: buttonIconColor
+                color: element.props.color ?? buttonTextColor
             })
         }
         return null;
@@ -102,7 +106,7 @@ const Button: React.FC<ButtonProps> = ({
                             STYLES.BUTTON_CONT,
                             dynamicStyles.FLAT_BTN_INNER_CONT,
                             dynamicStyles.BUTTON_CONT,
-                            buttonContainerStyle
+                            containerStyle
                         ]}>
                         {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
                             <StyledView f={fullWidth ? 1 : undefined}>
@@ -114,15 +118,20 @@ const Button: React.FC<ButtonProps> = ({
                             flexShrink={1}
                             f={fullWidth ? 8 : undefined}
                         >
-                            <StyledText numberOfLines={1} fs={titleFS} variant={titleVariant}
-                                style={[
-                                    STYLES.BUTTON_TEXT,
-                                    dynamicStyles.BUTTON_TEXT,
-                                    textStyle
-                                ]}
-                            >
-                                {title}
-                            </StyledText>
+                            {
+                                (title ?? children) ?
+                                <StyledText numberOfLines={1} fs={fs} fScale={fScale}
+                                    style={[
+                                        STYLES.BUTTON_TEXT,
+                                        dynamicStyles.BUTTON_TEXT,
+                                        titleStyle,
+                                    ]}
+                                >
+                                    {title ?? children}
+                                </StyledText>
+                                :
+                                (renderIcon && cloneElement(renderIcon))
+                            }
                         </StyledView>
 
                         {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
@@ -150,7 +159,7 @@ const Button: React.FC<ButtonProps> = ({
                             STYLES.ROUND_BTN_INNER_CONT,
                             dynamicStyles.BUTTON_CONT,
                             dynamicStyles.ROUND_BTN_INNER_CONT,
-                            buttonContainerStyle
+                            containerStyle
                         ]}
                     >
                         {renderIcon && cloneElement(renderIcon)}
@@ -165,7 +174,7 @@ const Button: React.FC<ButtonProps> = ({
 export default Button;
 export type { ButtonProps };
 
-const STYLES = StyleSheet.create({
+const customStyles = () => StyleSheet.create({
     BUTTON_CONT: {
         maxWidth: '100%',
     },

package/src/components/Button/utils.ts

@@ -11,12 +11,12 @@ const getButtonBorderColor = ({
     disabled: boolean;
 }) => {
     if (disabled) {
-        return theme.colors.outline;
+        return theme.colors.border.default;
     }
     if (strokeColor) {
         return strokeColor
     }
-    return theme.colors.outline;
+    return theme.colors.border.default;
 };
 
 
@@ -33,15 +33,15 @@ const getButtonTextColor = ({
 }) => {
 
     if (disabled) {
-        return theme.colors.textDisable;
+        return theme.colors.typography.disabled;
     }
     else if (titleColor) {
         return titleColor
     }
     else if (checkVariant('outlined')) {
-        return theme.colors.textPrimary;
+        return theme.colors.typography.primary;
     }
-    return theme.colors.textSecondary;
+    return theme.colors.brand.onPrimary;
 };
 
 const getButtonBackgroundColor = ({
@@ -57,37 +57,37 @@ const getButtonBackgroundColor = ({
 }) => {
 
     if (disabled) {
-        return theme.colors.disable;
+        return theme.colors.states.disabled;
     }
     else if (bg) {
         return bg
     }
     else if (checkVariant('contained')) {
-        return theme.colors.primary;
+        return theme.colors.brand.primary;
     }
     else if (checkVariant('outlined')) {
         return 'transparent';
     }
-    return theme.colors.primary;
+    return theme.colors.brand.primary;
 };
 
 
-const getButtonIconColor = ({
-    theme,
-    checkVariant,
-    disabled,
-}: {
-    theme: ThemeTypes;
-    checkVariant: (variant: ButtonVariant) => boolean;
-    disabled: boolean;
-}) => {
-    if (disabled) {
-        return theme.colors.iconDisable;
-    } else if (checkVariant('outlined')) {
-        return theme.colors.iconPrimary
-    }
-    return theme.colors.iconSecondary;
-};
+// const getButtonIconColor = ({
+//     theme,
+//     checkVariant,
+//     disabled,
+// }: {
+//     theme: ThemeTypes;
+//     checkVariant: (variant: ButtonVariant) => boolean;
+//     disabled: boolean;
+// }) => {
+//     if (disabled) {
+//         return theme.colors.iconDisable;
+//     } else if (checkVariant('outlined')) {
+//         return theme.colors.iconPrimary
+//     }
+//     return theme.colors.iconSecondary;
+// };
 
 const getButtonColors = ({
     theme,
@@ -125,17 +125,17 @@ const getButtonColors = ({
         strokeColor,
         disabled
     });
-    const buttonIconColor = getButtonIconColor({
-        checkVariant,
-        theme,
-        disabled
-    });
+    // const buttonIconColor = getButtonIconColor({
+    //     checkVariant,
+    //     theme,
+    //     disabled
+    // });
 
     return {
         backgroundColor,
         buttonTextColor,
         buttonBorderColor,
-        buttonIconColor
+        // buttonIconColor
     }
 };
 

package/src/components/CheckBox/CheckBox.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, 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,
 }) => {
@@ -32,18 +34,20 @@ const CheckBox: React.FC<CheckBoxProps> = ({
         setIsCheckboxChecked(defaultValue);
     }, [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
     };
 
@@ -68,38 +72,38 @@ 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;
 export type { CheckBoxProps };
 
-const STYLES = StyleSheet.create({
+const Styles = () => StyleSheet.create({
     CONTAINER: {
         flexDirection: 'row',
         gap: horizontalScale(10),
@@ -109,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,36 +59,24 @@ 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>
     </>);
 }
 export default Chip;
-export type { ChipProps };
+export type { ChipProps };
+

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,14 +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)',
-    // animationDuration = 800,
+    backdropColor,
     onClose,
     containerStyle,
     children,
@@ -21,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, {
@@ -53,7 +55,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
 
     const backdropAnimatedStyles = {
         opacity: opacity,
-        backgroundColor: backdropColor,
+        backgroundColor:  backdropColor ?? theme?.colors.background.backdrop,
     };
     const modalContAnimatedStyles = {
         transform: [{ scale }],
@@ -63,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 = () => {
@@ -112,9 +117,9 @@ const STYLES = StyleSheet.create({
         alignItems: 'center',
     },
     MODAL_CONT: {
-        backgroundColor: '#fff',
+        // backgroundColor: '#fff',
         borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#d4d4d4'
+        // borderColor: '#d4d4d4'
     }
 });