@nexara/nativeflow 0.1.8 → 0.1.10

package/src/components/Slider/Slider.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { StyleSheet } from "react-native";
-import {  verticalScale, } from "../../helpers/ResponsiveCalculations";
-import { StyledView } from '../StyledComponents';
-
-
-type SliderProps = {
-    value?: number;
-    size?: number;
-    trackColor?: string;
-    progressColor?: string;
-}
-
-const Slider: React.FC<SliderProps> = ({
-    value = 50,
-    size = 5,
-    trackColor = '#645E64',
-    progressColor = '#fff',
-}) => {
-
-    const STYLES = StyleSheet.create({
-        TRACK: {
-            backgroundColor: trackColor,
-            // borderRadius: moderateScale(100),
-            // overflow: 'hidden'
-        },
-        TRACK_ITEM: {
-            backgroundColor: progressColor,
-            height: verticalScale(size),
-            width: `${value}%`,
-            // borderRadius: moderateScale(100)
-        }
-    });
-  
-  
-    return (<>
-            <StyledView f={1} style={STYLES.TRACK}>
-                <StyledView style={STYLES.TRACK_ITEM} >
-
-                </StyledView>
-            </StyledView>
-    </>);
-};
-export default Slider;
-export type { SliderProps };
+import React from 'react';
+import { StyleSheet } from "react-native";
+import {  verticalScale, } from "../../helpers/ResponsiveCalculations";
+import { StyledView } from '../StyledComponents';
+
+
+type SliderProps = {
+    value?: number;
+    size?: number;
+    trackColor?: string;
+    progressColor?: string;
+}
+
+const Slider: React.FC<SliderProps> = ({
+    value = 50,
+    size = 5,
+    trackColor = '#645E64',
+    progressColor = '#fff',
+}) => {
+
+    const STYLES = StyleSheet.create({
+        TRACK: {
+            backgroundColor: trackColor,
+            // borderRadius: moderateScale(100),
+            // overflow: 'hidden'
+        },
+        TRACK_ITEM: {
+            backgroundColor: progressColor,
+            height: verticalScale(size),
+            width: `${value}%`,
+            // borderRadius: moderateScale(100)
+        }
+    });
+  
+  
+    return (<>
+            <StyledView f={1} style={STYLES.TRACK}>
+                <StyledView style={STYLES.TRACK_ITEM} >
+
+                </StyledView>
+            </StyledView>
+    </>);
+};
+export default Slider;
+export type { SliderProps };

package/src/components/Stack/HStack.tsx

@@ -1,33 +1,33 @@
-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: FC<HStackProps> = ({
-    align = 'center',
-    fWrap = 'wrap',
-    gap = 10,
-    containerStyle,
-    children,
-    ...rest
-}) => {
-
-    const viewProps: ViewStyle = {
-        gap: horizontalScale(gap),
-        flexDirection: 'row',
-        alignItems: align,
-        flexWrap: fWrap,
-    };
-
-    return (<>
-        <StyledView
-            style={[viewProps, containerStyle]}
-            {...rest}
-        >
-            {children}
-        </StyledView>
-    </>)
-}
-export default HStack;
+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: FC<HStackProps> = ({
+    align = 'center',
+    fWrap = 'wrap',
+    gap = 10,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+
+    const viewProps: ViewStyle = {
+        gap: horizontalScale(gap),
+        flexDirection: 'row',
+        alignItems: align,
+        flexWrap: fWrap,
+    };
+
+    return (<>
+        <StyledView
+            style={[viewProps, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>)
+}
+export default HStack;
 export type { HStackProps };

package/src/components/Stack/VStack.tsx

@@ -1,27 +1,27 @@
-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: FC<VStackProps> = ({
-    gap = 10,
-    containerStyle,
-    children,
-    ...rest
-}) => {
-    const viewProps: ViewStyle = {
-        flexDirection: 'column',
-        gap: verticalScale(gap),
-    };
-    return (<>
-        <StyledView
-            style={[viewProps, containerStyle]}
-            {...rest}
-        >
-            {children}
-        </StyledView>
-    </>)
-}
-export default VStack;
+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: FC<VStackProps> = ({
+    gap = 10,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+    const viewProps: ViewStyle = {
+        flexDirection: 'column',
+        gap: verticalScale(gap),
+    };
+    return (<>
+        <StyledView
+            style={[viewProps, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>)
+}
+export default VStack;
 export type { VStackProps };

package/src/components/Stack/index.ts

@@ -1,9 +1,9 @@
-import HStack  from "./HStack";
-import VStack  from "./VStack";
-const Stack = {
-    H: HStack,
-    V: VStack
-};
-export type { HStackProps } from './HStack';
-export type { VStackProps } from './VStack';
+import HStack  from "./HStack";
+import VStack  from "./VStack";
+const Stack = {
+    H: HStack,
+    V: VStack
+};
+export type { HStackProps } from './HStack';
+export type { VStackProps } from './VStack';
 export default Stack;

package/src/components/StyledComponents/StyledText.tsx

@@ -1,50 +1,50 @@
-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: FC<StyledTextProps> = ({
-    variant = 'primary',
-    fScale = 'base',
-    children,
-    style,
-    ff,
-    fs,
-    tas,
-    fw,
-    color,
-    themeColor,
-    ...rest
-}) => {
-    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 ?? typographyScales[fScale]),
-                fontFamily: ff ?? '',
-                textAlign: tas ? 'center' : 'auto',
-                fontWeight: fw ?? 'normal',
-                color: color ?? (themeColor && colors.brand.primary || getVariantColor()),
-            },
-                style,
-            ]}
-            {...rest}
-        >
-            {children}
-        </Text>
-    );
-};
-
-export default StyledText;
+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: FC<StyledTextProps> = ({
+    variant = 'primary',
+    fScale = 'base',
+    children,
+    style,
+    ff,
+    fs,
+    tas,
+    fw,
+    color,
+    themeColor,
+    ...rest
+}) => {
+    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 ?? typographyScales[fScale]),
+                fontFamily: ff ?? '',
+                textAlign: tas ? 'center' : 'auto',
+                ...(fw ? { fontWeight: fw } : {}),
+                color: color ?? (themeColor && colors.brand.primary || getVariantColor()),
+            },
+                style,
+            ]}
+            {...rest}
+        >
+            {children}
+        </Text>
+    );
+};
+
+export default StyledText;
 export type { StyledTextProps };

package/src/components/StyledComponents/StyledView.tsx

@@ -1,45 +1,45 @@
-import { forwardRef } from 'react';
-import { View } from 'react-native';
-import { useTheme } from '../../hooks';
-import type { StyledViewProps } from '../../types';
-
-
-const StyledView = forwardRef<View, StyledViewProps>(({
-    f,
-    justify,
-    align,
-    fWrap,
-    bg,
-    themeBg = false,
-    h,
-    w,
-    children,
-    style,
-    ...rest
-}, ref) => {
-
-    const theme = useTheme();
-    
-    return (
-        <View
-            style={[{
-                flex: f,
-                justifyContent: justify,
-                alignItems: align,
-                flexWrap: fWrap,
-                backgroundColor: bg ?? (themeBg ? theme?.colors.background.default : 'transparent'),
-                height: h,
-                width: w,
-            },
-                style
-            ]}
-            ref={ref}
-            {...rest}
-        >
-            {children}
-        </View>
-    );
-});
-
-export default StyledView;
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../hooks';
+import type { StyledViewProps } from '../../types';
+
+
+const StyledView = forwardRef<View, StyledViewProps>(({
+    f,
+    justify,
+    align,
+    fWrap,
+    bg,
+    themeBg = false,
+    h,
+    w,
+    children,
+    style,
+    ...rest
+}, ref) => {
+
+    const theme = useTheme();
+    
+    return (
+        <View
+            style={[{
+                flex: f,
+                justifyContent: justify,
+                alignItems: align,
+                flexWrap: fWrap,
+                backgroundColor: bg ?? (themeBg ? theme?.colors.background.default : 'transparent'),
+                height: h,
+                width: w,
+            },
+                style
+            ]}
+            ref={ref}
+            {...rest}
+        >
+            {children}
+        </View>
+    );
+});
+
+export default StyledView;
 export type { StyledViewProps };

package/src/components/StyledComponents/index.tsx

@@ -1,6 +1,6 @@
-export { default as StyledText } from './StyledText';
-export { default as StyledView } from './StyledView';
-
-
-export type { StyledViewProps } from './StyledView';
+export { default as StyledText } from './StyledText';
+export { default as StyledView } from './StyledView';
+
+
+export type { StyledViewProps } from './StyledView';
 export type { StyledTextProps } from './StyledText';

package/src/components/Surface/Surface.tsx

@@ -1,31 +1,31 @@
-import type { FC } from 'react';
-import { StyledView } from '../StyledComponents';
-import { useTheme } from '../../hooks';
-import { verticalScale } from '../../helpers';
-import type { SurfaceProps } from '../../types';
-
-const Surface: FC<SurfaceProps> = ({
-    variant = 'elevated',
-    padding = 10,
-    br = 5,
-    children,
-    ...rest
-}) => {
-
-    const { colors }: any = useTheme();
-    const styles = variant === 'elevated' ? { boxShadow: colors.elevation.level1 } : { borderColor: colors.border.default, borderWidth: 0.5 };
-
-    return (<>
-        <StyledView
-            padding={verticalScale(padding)}
-            borderRadius={verticalScale(br)}
-            bg={colors.background.surface}
-            {...styles}
-            {...rest}
-        >
-            {children}
-        </StyledView>
-    </>);
-};
-export default Surface;
-export type { SurfaceProps };
+import type { FC } from 'react';
+import { StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import { verticalScale } from '../../helpers';
+import type { SurfaceProps } from '../../types';
+
+const Surface: FC<SurfaceProps> = ({
+    variant = 'default',
+    padding = 10,
+    br = 5,
+    children,
+    ...rest
+}) => {
+
+    const { colors }: any = useTheme();
+    const styles = variant === 'elevated' ? { boxShadow: colors.elevation.level1 } : variant === 'outlined' ? { borderColor: colors.border.default, borderWidth: 0.5 } : {};
+
+    return (<>
+        <StyledView
+            padding={verticalScale(padding)}
+            borderRadius={verticalScale(br)}
+            bg={colors.background.surface}
+            {...styles}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>);
+};
+export default Surface;
+export type { SurfaceProps };

package/src/components/Switch/Switch.tsx

@@ -1,37 +1,37 @@
-import type { FC } from "react";
-import { Switch as NativeSwitch } from "react-native";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
-import { useTheme } from "../../hooks";
-import type { SwitchProps } from "../../types";
-import Color from "color";
-
-const Switch: FC<SwitchProps> = ({
-    checked = true,
-    color,
-    disabled = false,
-    size = 0.9,
-    activeTrackColor,
-    inactiveTrackColor,
-    onChange,
-    ...rest
-}) => {
-
-    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: (disabled && disabledAndInActiveTrackColor) || (activeTrackColor ?? generateActiveTrackColor), false: (disabled && disabledAndInActiveTrackColor) || (inactiveTrackColor ?? disabledAndInActiveTrackColor) }}
-            thumbColor={switchColor}
-            onValueChange={onChange}
-            style={{ transform: [{ scaleX: verticalScale(size) }, { scaleY: verticalScale(size) }] }}
-            disabled={disabled}
-            {...rest}
-        />
-    </>)
-}
-export default Switch;
+import type { FC } from "react";
+import { Switch as NativeSwitch } from "react-native";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from "../../hooks";
+import type { SwitchProps } from "../../types";
+import Color from "color";
+
+const Switch: FC<SwitchProps> = ({
+    checked = true,
+    color,
+    disabled = false,
+    size = 0.9,
+    activeTrackColor,
+    inactiveTrackColor,
+    onChange,
+    ...rest
+}) => {
+
+    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: (disabled && disabledAndInActiveTrackColor) || (activeTrackColor ?? generateActiveTrackColor), false: (disabled && disabledAndInActiveTrackColor) || (inactiveTrackColor ?? disabledAndInActiveTrackColor) }}
+            thumbColor={switchColor}
+            onValueChange={onChange}
+            style={{ transform: [{ scaleX: verticalScale(size) }, { scaleY: verticalScale(size) }] }}
+            disabled={disabled}
+            {...rest}
+        />
+    </>)
+}
+export default Switch;
 export type { SwitchProps };