@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Dialog/DialogBody.tsx

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

package/src/components/Dialog/DialogDescription.tsx

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

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

package/src/components/Dialog/DialogHead.tsx

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

package/src/components/Dialog/index.ts

@@ -1,11 +1,11 @@
-export { default as Dialog } from './Dialog';
-export { default as DialogHead } from './DialogHead';
-export { default as DialogBody } from './DialogBody';
-export { default as DialogFoot } from './DialogFoot';
-export { default as DialogDescription } from './DialogDescription';
-
-export type { DialogProps } from './Dialog';
-export type { DialogHeadProps } from './DialogHead';
-export type { DialogBodyProps } from './DialogBody';
-export type { DialogFootProps } from './DialogFoot';
+export { default as Dialog } from './Dialog';
+export { default as DialogHead } from './DialogHead';
+export { default as DialogBody } from './DialogBody';
+export { default as DialogFoot } from './DialogFoot';
+export { default as DialogDescription } from './DialogDescription';
+
+export type { DialogProps } from './Dialog';
+export type { DialogHeadProps } from './DialogHead';
+export type { DialogBodyProps } from './DialogBody';
+export type { DialogFootProps } from './DialogFoot';
 export type { DialogDescriptionProps } from './DialogDescription';

package/src/components/Divider/Divider.tsx

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

package/src/components/Grid/Grid.tsx

@@ -1,60 +1,61 @@
-import React, { useMemo } from 'react';
-import { View, StyleSheet } from "react-native";
-import { getGridValue } from '../../helpers';
-import { useConditionalWindowDimension } from '../../hooks';
-import type { GridProps } from '../../types';
-
-const Grid: React.FC<GridProps> = ({
-    container = false,
-    item = false,
-    spacing = 0,
-    spacingH = 0,
-    spacingV = 0,
-    size = 12,
-    xs = 12,
-    sm = 0,
-    md = 0,
-    lg = 0,
-    xl = 0,
-    containerStyle,
-    children,
-    ...rest
-}) => {
-    container = !item;
-    xs = Math.min(xs, 12);
-    sm = Math.min(sm, 12);
-    md = Math.min(md, 12);
-    lg = Math.min(lg, 12);
-    xl = Math.min(xl, 12);
-
-    const { width: windowWidth } = useConditionalWindowDimension(item);
-
-    const calculatedGridValue: number = item ? useMemo(() => getGridValue({
-        xs,
-        sm,
-        md,
-        lg,
-        xl,
-    }, windowWidth), [windowWidth, xs, sm, md, lg, xl]) : 12;
-
-    const STYLES = StyleSheet.create({
-        MAIN_CONT: {
-            width: item ? `${((calculatedGridValue / size) * 100)}%` : "100%",
-            flexDirection: 'row',
-            flexWrap: container ? 'wrap' : 'nowrap',
-            paddingHorizontal: spacingH,
-            paddingVertical: spacingV,
-            gap: spacing,
-        },
-    });
-    return (<>
-        <View
-            style={[STYLES.MAIN_CONT, containerStyle]}
-            {...rest}
-        >
-            {children}
-        </View>
-    </>);
-};
-export default Grid;
-export type { GridProps };
+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: FC<GridProps> = ({
+    container = false,
+    item = false,
+    spacing = 0,
+    spacingH = 0,
+    spacingV = 0,
+    size = 12,
+    xs = 12,
+    sm = 0,
+    md = 0,
+    lg = 0,
+    xl = 0,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+    container = !item;
+    xs = Math.min(xs, 12);
+    sm = Math.min(sm, 12);
+    md = Math.min(md, 12);
+    lg = Math.min(lg, 12);
+    xl = Math.min(xl, 12);
+
+    const { width: windowWidth } = useConditionalWindowDimension(item);
+
+    const calculatedGridValue: number = item ? useMemo(() => getGridValue({
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+    }, windowWidth), [windowWidth, xs, sm, md, lg, xl]) : 12;
+
+    const STYLES = StyleSheet.create({
+        MAIN_CONT: {
+            width: item ? `${((calculatedGridValue / size) * 100)}%` : "100%",
+            flexDirection: 'row',
+            flexWrap: container ? 'wrap' : 'nowrap',
+            paddingHorizontal: spacingH,
+            paddingVertical: spacingV,
+            gap: spacing,
+        },
+    });
+    return (<>
+        <StyledView
+            style={[STYLES.MAIN_CONT, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>);
+};
+export default Grid;
+export type { GridProps };

package/src/components/Icon/Icon.tsx

@@ -1,32 +1,32 @@
-import React, { useMemo, type JSX } from "react";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
-import { useTheme } from "../../hooks";
-
-
-type IconProps = {
-    renderIcon: JSX.Element;
-    color?: string;
-}
-
-const Icon: React.FC<IconProps> = ({
-    renderIcon,
-    color
-}) => {
-    const theme = useTheme(!color && !renderIcon?.props.color);
-
-    const renderCallBackIcon = useMemo(() => {
-        return React.cloneElement(renderIcon as React.ReactElement<any>,
-            {
-                ...renderIcon?.props,
-                size: verticalScale(renderIcon?.props?.size ?? 17),
-                color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
-            }
-        )
-    }, [color, theme, renderIcon.props]);
-
-    return (<>
-        {renderCallBackIcon}
-    </>)
-}
-export default Icon;
+import React, { useMemo, type JSX } from "react";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from "../../hooks";
+
+
+type IconProps = {
+    renderIcon: JSX.Element;
+    color?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+    renderIcon,
+    color
+}) => {
+    const theme = useTheme(!color && !renderIcon?.props.color);
+
+    const renderCallBackIcon = useMemo(() => {
+        return React.cloneElement(renderIcon as React.ReactElement<any>,
+            {
+                ...renderIcon?.props,
+                size: verticalScale(renderIcon?.props?.size ?? 17),
+                color: color ?? (renderIcon?.props.color ?? theme?.colors.typography.secondary)
+            }
+        )
+    }, [color, theme, renderIcon.props]);
+
+    return (<>
+        {renderCallBackIcon}
+    </>)
+}
+export default Icon;
 export type { IconProps };

package/src/components/IconButton/IconButton.tsx

@@ -1,45 +1,45 @@
-import React, { isValidElement } from "react";
-import type { ReactElement } from "react";
-import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import Icon from "../Icon/Icon";
-
-
-type IconButtonProps = TouchableOpacityProps & {
-    rippleColor?: string;
-    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 (<>
-        <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;
+import React, { isValidElement } from "react";
+import type { ReactElement } from "react";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+import Icon from "../Icon/Icon";
+
+
+type IconButtonProps = TouchableOpacityProps & {
+    rippleColor?: string;
+    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 (<>
+        <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;
 export type { IconButtonProps };