@nexara/nativeflow 0.1.2 → 0.1.6

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@nexara/nativeflow",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "description": "Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
+  "sideEffects": false,
   "exports": {
     ".": {
       "import": {
@@ -43,12 +44,30 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
-    "release": "release-it"
+    "size": "size-limit",
+    "release": "release-it",
+    "build-docs": "cd docs && yarn build",
+    "start-docs": "cd docs && yarn start"
   },
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "react-native",
+    "react-native-ui",
+    "react-native-components",
+    "react-native-library",
+    "mobile-ui",
+    "react-native-kit",
+    "cross-platform-ui",
+    "react-native-ios",
+    "react-native-android",
+    "ui-components",
+    "custom-components",
+    "react-native-design-system",
+    "react-native-styling",
+    "rn-ui",
+    "react-native-ui-kit"
   ],
   "repository": {
     "type": "git",
@@ -71,7 +90,7 @@
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.44",
+    "@types/react": "^19.0.0",
     "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -79,25 +98,20 @@
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "18.3.1",
-    "react-native": "0.76.7",
+    "react": "^19.0.0",
+    "react-native": "^0.78.0",
     "react-native-builder-bob": "^0.36.0",
-    "react-native-gesture-handler": "^2.24.0",
-    "react-native-reanimated": "~3.16.1",
     "react-native-svg": "^15.11.2",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
-  "resolutions": {
-    "@types/react": "^18.2.44"
-  },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-reanimated": "~3.16.1"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.72.0"
   },
   "workspaces": [
-    "example"
+    "example",
+    "docs"
   ],
   "packageManager": "yarn@3.6.1",
   "jest": {
@@ -189,9 +203,5 @@
     "languages": "js",
     "type": "library",
     "version": "0.48.3"
-  },
-  "dependencies": {
-    "color": "^5.0.0",
-    "lucide-react-native": "^0.479.0"
   }
 }

package/src/components/Button/Button.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { JSX } from 'react';
-import { StyleSheet } from "react-native";
-import type { ViewStyle } from 'react-native';
+import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
 import { StyledText, StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
 import { getButtonColors } from './utils';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { ButtonProps } from '../../types';
 
 
@@ -34,7 +32,7 @@ const Button: React.FC<ButtonProps> = ({
     buttonContainerStyle,
     textStyle,
     onPress,
-    ...props
+    ...rest
 }) => {
     const theme: any = useTheme();
 
@@ -83,13 +81,21 @@ const Button: React.FC<ButtonProps> = ({
     return (<>
         {type === 'flat' && (
             <StyledView style={[STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT]}>
-                <TouchableRipple
+                <TouchableOpacity
                     onPress={onPress}
-                    rippleColor={rippleColor}
+                    // rippleColor={rippleColor}
                     disabled={disabled}
                     // ref={ref}
-                    {...props}
+                    {...rest}
                 >
+
+                    {/* <TouchableRipple
+                    onPress={onPress}
+                    rippleColor={rippleColor}
+                    disabled={disabled}
+                    // ref={ref}
+                    {...rest}
+                > */}
                     <StyledView
                         style={[
                             STYLES.FLAT_BTN_INNER_CONT,
@@ -125,16 +131,18 @@ const Button: React.FC<ButtonProps> = ({
                             </StyledView>
                         )}
                     </StyledView>
-                </TouchableRipple>
+                    {/* </TouchableRipple> */}
+                </TouchableOpacity>
+
             </StyledView>
         )}
 
         {type === 'round' && (
             <StyledView style={STYLES.ROUND_BTN_MAIN_CONT} >
-                <TouchableRipple
+                <TouchableOpacity
                     onPress={onPress}
-                    rippleColor={rippleColor}
-                    {...props}
+                    // rippleColor={rippleColor}
+                    {...rest}
                 >
                     <StyledView
                         style={[
@@ -147,7 +155,7 @@ const Button: React.FC<ButtonProps> = ({
                     >
                         {renderIcon && cloneElement(renderIcon)}
                     </StyledView>
-                </TouchableRipple>
+                </TouchableOpacity>
             </StyledView>
         )}
     </>
@@ -176,7 +184,7 @@ const STYLES = StyleSheet.create({
     ROUND_BTN_MAIN_CONT: {
         overflow: 'hidden',
         borderRadius: verticalScale(100),
-        // alignSelf: 'flex-start',
+        alignSelf: 'flex-start',
     },
     ROUND_BTN_INNER_CONT: {
         alignItems: 'center',

package/src/components/Chip/Chip.tsx

@@ -23,7 +23,7 @@ const Chip: React.FC<ChipProps> = ({
     renderRightIcon,
     containerStyle,
     textStyle,
-    ...props
+    ...rest
 }) => {
 
     const theme: any = useTheme();
@@ -58,7 +58,7 @@ const Chip: React.FC<ChipProps> = ({
                 android_ripple={{
                     color: rippleColor,
                 }}
-                {...props}
+                {...rest}
                 disabled={disabled}
             >
                 <StyledView style={[STYLES.CONTAINER, containerStyle]}>

package/src/components/Dialog/Dialog.tsx

@@ -14,6 +14,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     backdropColor = 'rgba(0, 0, 0, 0.5)',
     // animationDuration = 800,
     onClose,
+    containerStyle,
     children,
 }, ref) => {
 
@@ -88,7 +89,7 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
                 onStartShouldSetResponder={handleStartShouldSetResponder}
             >
                 <Animated.View
-                    style={[STYLES.MODAL_CONT, dynamicModalContStyles, modalContAnimatedStyles]}
+                    style={[STYLES.MODAL_CONT, dynamicModalContStyles, modalContAnimatedStyles, containerStyle]}
                     onStartShouldSetResponder={() => true}
                 >
                     {renderChildrenWithVariant()}

package/src/components/Dialog/DialogDescription.tsx

@@ -5,8 +5,8 @@ import { StyledText } from '../StyledComponents';
 import type { DialogDescriptionProps } from '../../types';
 
 const DialogDescription: React.FC<DialogDescriptionProps> = ({
-    fs,
     textVariant = 'h5',
+    fs,
     containerStyle,
     textStyle,
     children,

package/src/components/Dialog/DialogFoot.tsx

@@ -20,7 +20,7 @@ const DialogFoot: React.FC<props> = ({
         paddingHorizontal: moderateScale(variant === 'default' ? 16 : 25),
     };
     return (<>
-        <Stack.H  style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
+        <Stack.H style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
             {children}
         </Stack.H>
     </>);

package/src/components/Divider/Divider.tsx

@@ -12,7 +12,6 @@ type DividerProps = {
 
 const Divider: React.FC<DividerProps> = ({
     thickness = 0.2,
-    // color = '#DCDBDB',
     color,
     style
 }) => {

package/src/components/Grid/Grid.tsx

@@ -45,7 +45,6 @@ const Grid: React.FC<GridProps> = ({
             paddingHorizontal: spacingH,
             paddingVertical: spacingV,
             gap: spacing,
-            // flexShrink:1
         },
     });
     return (<>

package/src/components/Icon/Icon.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo } from "react";
-import type { JSX } from 'react';
+import React, { useMemo, type JSX } from "react";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from "../../hooks";
 

package/src/components/IconButton/IconButton.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import type { ReactNode } from "react";
-import type { PressableProps } from "react-native";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
 import { StyledView } from "../StyledComponents";
-import TouchableRipple from "../TouchableRipple/TouchableRipple";
+// import TouchableRipple from "../TouchableRipple/TouchableRipple";
 import Icon from "../Icon/Icon";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 
 
-type IconButtonProps = PressableProps & {
+type IconButtonProps = TouchableOpacityProps & {
     rippleColor?: string;
     children?: ReactNode;
 }
@@ -20,15 +20,15 @@ const IconButton: React.FC<IconButtonProps> = ({
 
     return (<>
         <StyledView style={{ alignSelf: 'flex-start' }}>
-            <TouchableRipple
-                rippleColor={rippleColor}
+            <TouchableOpacity
+                // rippleColor={rippleColor}
                 style={{ borderRadius: 100, padding: verticalScale(8) }}
                 {...rest}
             >
                 <Icon
                     renderIcon={React.cloneElement(children as React.ReactElement<any>)}
                 />
-            </TouchableRipple>
+            </TouchableOpacity>
         </StyledView>
     </>)
 }

package/src/components/Menu/Menu.tsx

@@ -21,7 +21,7 @@ const Menu: React.FC<MenuProps> = ({
     const [isVisible, setIsVisible] = useState<boolean>(false);
     const anchorLayoutRef = useRef<anchorLayoutTypes>({ pageY: 0, pageX: 0, height: 0, width: 0 });
     const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
-    const buttonRef = useRef<View | null>(null);
+    const buttonRef = useRef<View>(null!);
     const animatedScaleRef = useRef(new Animated.Value(1)).current;
 
     const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();

package/src/components/Stack/HStack.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
-import { View } from "react-native";
+import type { ViewStyle } from "react-native";
 import { horizontalScale } from "../../helpers/ResponsiveCalculations";
-import type { ViewStyle } from 'react-native';
 import type { HStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
 
 const HStack: React.FC<HStackProps> = ({
     justify,
@@ -11,11 +11,10 @@ const HStack: React.FC<HStackProps> = ({
     gap = 10,
     style,
     children,
-    ref,
     ...rest
 }) => {
     const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
-    
+
     const viewProps: ViewStyle = {
         gap: calculatedGap,
         flexDirection: 'row',
@@ -25,13 +24,12 @@ const HStack: React.FC<HStackProps> = ({
     };
 
     return (<>
-        <View
+        <StyledView
             style={[viewProps, style]}
-            ref={ref}
             {...rest}
         >
             {children}
-        </View>
+        </StyledView>
     </>)
 }
 export default HStack;

package/src/components/Stack/VStack.tsx

@@ -1,33 +1,31 @@
 import React, { useMemo } from "react";
-import { View } from "react-native";
-import { horizontalScale } from "../../helpers/ResponsiveCalculations";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import type { VStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
+import type { ViewStyle } from "react-native";
 
 const VStack: React.FC<VStackProps> = ({
     children,
     align,
     gap = 10,
     style,
-    ref,
     ...rest
 }) => {
 
-    const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
+    const calculatedGap: number = useMemo(() => verticalScale(gap), [gap]);
 
-    const viewProps = {
+    const viewProps: ViewStyle = {
         flexDirection: 'column',
         alignItems: align,
         gap: calculatedGap,
     };
     return (<>
-        <View
-            {...viewProps}
-            style={style}
-            ref={ref}
+        <StyledView
+            style={[viewProps, style]}
             {...rest}
         >
             {children}
-        </View>
+        </StyledView>
     </>)
 }
 export default VStack;

package/src/components/StyledComponents/StyledText.tsx

@@ -16,12 +16,11 @@ const StyledText: React.FC<StyledTextProps> = ({
     themeColor,
     primary,
     secondary,
-    ...props
+    ...rest
 }) => {
     const { colors, typography: { variantSizes } }: any = useTheme();
     return (
         <Text
-            // allowFontScaling={false}
             style={[{
                 fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
                 fontFamily: ff ?? '',
@@ -31,7 +30,7 @@ const StyledText: React.FC<StyledTextProps> = ({
             },
                 style,
             ]}
-            {...props}
+            {...rest}
         >
             {children}
         </Text>

package/src/components/StyledComponents/StyledView.tsx

@@ -18,7 +18,7 @@ const StyledView: React.FC<StyledViewProps> = ({
     ref,
     ...rest
 }) => {
-    
+
     const theme = useTheme(themeBg);
 
     return (

package/src/components/Switch/Switch.tsx

@@ -13,7 +13,7 @@ const Switch: React.FC<SwitchProps> = ({
     activeTrackColor,
     inactiveTrackColor = '#808080',
     onChange,
-    ...props
+    ...rest
 }) => {
 
     const theme: any = useTheme();
@@ -27,7 +27,7 @@ const Switch: React.FC<SwitchProps> = ({
             onValueChange={onChange}
             style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}
             disabled={disabled}
-            {...props}
+            {...rest}
         />
     </>)
 }

package/src/components/TouchableRipple/TouchableRipple.tsx

@@ -1,92 +1,92 @@
-import React from 'react';
-import { Pressable, StyleSheet } from "react-native";
-import type { ViewStyle, StyleProp, PressableProps } from "react-native";
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { StyledView } from '../StyledComponents';
+// import React from 'react';
+// import { Pressable, StyleSheet } from "react-native";
+// import type { ViewStyle, StyleProp, PressableProps } from "react-native";
+// import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+// import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+// import { StyledView } from '../StyledComponents';
 
 
-type TouchableRippleProps = PressableProps & {
-    rippleColor?: string;
-    style?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-}
+// type TouchableRippleProps = PressableProps & {
+//     rippleColor?: string;
+//     style?: StyleProp<ViewStyle>;
+//     children?: React.ReactNode;
+// }
 
-const TouchableRipple: React.FC<TouchableRippleProps> = ({
-    rippleColor = '#b6b6b681',
-    style,
-    children,
-    ...props
-}) => {
+// const TouchableRipple: React.FC<TouchableRippleProps> = ({
+//     rippleColor = '#b6b6b681',
+//     style,
+//     children,
+//     ...rest
+// }) => {
 
-    const positionX = useSharedValue(0);
-    const positionY = useSharedValue(0);
-    const overlayHeight = useSharedValue(0);
-    const overlayWidth = useSharedValue(0);
-    const scale = useSharedValue(0);
-    const opacity = useSharedValue(1);
+//     const positionX = useSharedValue(0);
+//     const positionY = useSharedValue(0);
+//     const overlayHeight = useSharedValue(0);
+//     const overlayWidth = useSharedValue(0);
+//     const scale = useSharedValue(0);
+//     const opacity = useSharedValue(1);
 
-    const STYLES = StyleSheet.create({
-        OVERLAY: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: -1
-        }
-    });
+//     const STYLES = StyleSheet.create({
+//         OVERLAY: {
+//             position: 'absolute',
+//             top: 0,
+//             left: 0,
+//             zIndex: -1
+//         }
+//     });
 
-    const effectAnimatedStyle = useAnimatedStyle(() => {
-        const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
-        return {
-            height: radius * 2,
-            width: radius * 2,
-            opacity: opacity.value,
-            borderRadius: radius,
-            backgroundColor: rippleColor,
-            transform: [
-                { translateX: positionX.value - radius },
-                { translateY: positionY.value - radius },
-                {
-                    scale: scale.value
-                }
-            ]
-        }
-    });
+//     const effectAnimatedStyle = useAnimatedStyle(() => {
+//         const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
+//         return {
+//             height: radius * 2,
+//             width: radius * 2,
+//             opacity: opacity.value,
+//             borderRadius: radius,
+//             backgroundColor: rippleColor,
+//             transform: [
+//                 { translateX: positionX.value - radius },
+//                 { translateY: positionY.value - radius },
+//                 {
+//                     scale: scale.value
+//                 }
+//             ]
+//         }
+//     });
 
-    const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
-        positionX.value = allTouches[0].x;
-        positionY.value = allTouches[0].y;
-        opacity.value = 1;
-        scale.value = 0;
-        scale.value = withTiming(1, { duration: 600 });
-    }).onTouchesUp(() => {
-        opacity.value = withTiming(0, { duration: 800 });
-    }).onTouchesCancelled(() => {
-        opacity.value = withTiming(0, { duration: 800 });
-    }) : Gesture.Simultaneous();
+//     const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
+//         positionX.value = allTouches[0].x;
+//         positionY.value = allTouches[0].y;
+//         opacity.value = 1;
+//         scale.value = 0;
+//         scale.value = withTiming(1, { duration: 600 });
+//     }).onTouchesUp(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }).onTouchesCancelled(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }) : Gesture.Simultaneous();
 
 
-    return (<>
-        <GestureHandlerRootView style={{ width: '100%' }}>
-            <GestureDetector gesture={onGesturePress}>
-                <Pressable
-                    {...props}
-                >
-                    <StyledView
-                        overflow='hidden'
-                        onLayout={({ nativeEvent: { layout: { height, width } } }) => {
-                            overlayHeight.value = height;
-                            overlayWidth.value = width;
-                        }}
-                        style={style}
-                    >
-                        {children}
-                        <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
-                    </StyledView>
-                </Pressable>
-            </GestureDetector>
-        </GestureHandlerRootView>
-    </>);
-};
-export default TouchableRipple;
-export type { TouchableRippleProps };
+//     return (<>
+//         <GestureHandlerRootView style={{ width: '100%' }}>
+//             <GestureDetector gesture={onGesturePress}>
+//                 <Pressable
+//                     {...rest}
+//                 >
+//                     <StyledView
+//                         overflow='hidden'
+//                         onLayout={({ nativeEvent: { layout: { height, width } } }) => {
+//                             overlayHeight.value = height;
+//                             overlayWidth.value = width;
+//                         }}
+//                         style={style}
+//                     >
+//                         {children}
+//                         <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
+//                     </StyledView>
+//                 </Pressable>
+//             </GestureDetector>
+//         </GestureHandlerRootView>
+//     </>);
+// };
+// export default TouchableRipple;
+// export type { TouchableRippleProps };

package/src/components/UserInput/UserInput.tsx

@@ -34,7 +34,7 @@ const UserInput: React.FC<UserInputProps> = ({
     renderRightIcon,
     styles,
     ref,
-    ...props
+    ...rest
 }) => {
 
     const theme: any = useTheme();
@@ -88,7 +88,7 @@ const UserInput: React.FC<UserInputProps> = ({
                     editable={!disabled}
                     multiline={multiline}
                     cursorColor={computedCursorColor}
-                    {...props}
+                    {...rest}
                 />
                 {
                     renderRightIcon

package/src/components/UserInput/UserInputV2.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { TextInputProps, ViewStyle, TextStyle } from "react-native";
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
@@ -116,7 +116,7 @@ const UserInputV2: React.FC<UserInputV2Props> = ({
                         editable={!isDisabled}
                         multiline={multiline}
                         cursorColor={cursor}
-                        {...props}
+                        {...rest}
                     /> */}
                     <StyledText>Email</StyledText>
                 </View>