@nexara/nativeflow 0.1.1

package/src/themes/LightTheme.ts

@@ -0,0 +1,97 @@
+import Color from "color";
+import { dialogSizes, typographySizes } from "../constants";
+import type { ThemeTypes } from "../types";
+
+// const base = Color(theme.colors.primary);
+
+// const createTheme = (theme: { primary: string; secondary: string }) => {
+//     return {
+//         isDark: false,
+//         colors: {
+//             ...theme,
+//             outline: '#8080805e',
+//             disable: Color(theme.primary).mix(Color("white"), 0.4).hex(),
+
+//             textPrimary: '#000000',
+//             textSecondary: '#ffffff',
+//             textTertiary: 'gray',
+//             textDisable: '#9E9E9E',
+//             cursorColor: '#000000',
+//             placeholderColor: '#808080',
+
+//             iconPrimary: '#000000',
+//             iconSecondary: '#E0E0E0',
+//             iconDisable: '#9E9E9E',
+
+//             dividerColor: "#DCDBDB",
+
+//             switchColor: '#353935',
+//             error: '#ED2939',
+//         },
+//         typography: {
+//             variantSizes: typographySizes
+//         },
+//         // screenBreakpoints: BreakPoints,
+//         dialogSizes
+//     }
+// }
+
+// const LightTheme = createTheme({
+//     primary: '#000000',
+//     secondary: '#ffffff',
+//     textPrimary: '#000000',
+
+//     textSecondary: '#ffffff',
+//     textTertiary: 'gray',
+//     textDisable: '#9E9E9E',
+//     cursorColor: '#000000',
+//     placeholderColor: '#808080',
+
+//     iconPrimary: '#000000',
+//     iconSecondary: '#E0E0E0',
+//     iconDisable: '#9E9E9E',
+
+//     dividerColor: "#DCDBDB",
+
+//     switchColor: '#353935',
+//     error: '#ED2939',
+// })
+console.log(Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string())
+const LightTheme: ThemeTypes = {
+    isDark: false,
+    colors: {
+        primary: '#000000',
+        secondary: '#ffffff',
+        // tertiary: '#8080805e',
+        // outline: '#8080805e',
+        outline: '#cbd5e1',
+        // disable: '#E0E0E0',
+        disable: 'rgba(100, 100, 100, 0.15)',
+
+        textPrimary: '#000000',
+        textSecondary: '#ffffff',
+        textTertiary: '#808080',
+        textDisable: '#9E9E9E',
+        cursorColor: '#000000',
+        // placeholderColor: '#808080',
+        placeholderColor: '#cbd5e1',
+
+        iconPrimary: '#000000',
+        iconSecondary: '#E0E0E0',
+        iconDisable: '#9E9E9E',
+
+        dividerColor: "#DCDBDB",
+
+        inputBgColor: '#f9fbfd',
+        chipBgColor: '#f9fbfd',
+
+        switchColor: '#353935',
+        error: '#ED2939',
+    },
+    typography: {
+        variantSizes: typographySizes
+    },
+    dialogSizes
+}
+
+export default LightTheme;

package/src/themes/createTheme.ts

@@ -0,0 +1,23 @@
+// import Color from "color";
+// import { dialogSizes, typographySizes } from "../constants";
+// import type { ThemeColorTypes, ThemeTypes } from "./ThemeTypes";
+
+// const createTheme = (theme: ThemeColorTypes) => {
+//     console.log(theme)
+//     const primaryColor = Color(theme.primary)
+//     const isPrimaryDark = primaryColor.isDark();
+//     return {
+//         isDark: false,
+//         colors: {
+//             ...theme,
+//             outline: '#8080805e',
+//             disable: Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string(),
+
+//         },
+//         typography: {
+//             variantSizes: typographySizes
+//         },
+//         dialogSizes
+//     }
+// }
+// export default createTheme;

package/src/themes/index.ts

@@ -0,0 +1,4 @@
+export { default as LightTheme } from './LightTheme';
+export { default as DarkTheme } from './DarkTheme';
+// export { default as createTheme } from './createTheme';
+

package/src/types/avatar.type.ts

@@ -0,0 +1,43 @@
+import type { ImageProps, StyleProp, ViewStyle, ImageStyle, TextStyle } from "react-native";
+
+/** Props for the AvatarImage component */
+export type AvatarImageProps = {
+    /** Size of the avatar (width & height) */
+    size?: number;
+
+    /** Image source (can be a remote URI or a local asset reference) */
+    source?: { uri?: string } | number;
+
+    /** Background color of the avatar */
+    bg?: string;
+
+    /** Defines how the image should be resized to fit its container */
+    resizeMode?: NonNullable<ImageProps['resizeMode']>;
+
+    /** Custom styles for the avatar container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the image inside the avatar */
+    imageStyle?: StyleProp<ImageStyle>;
+};
+
+/** Props for the AvatarText component */
+export type AvatarTextProps = {
+    /** Size of the avatar (width & height) */
+    size?: number;
+
+    /** Font size of the text inside the avatar */
+    fs?: number;
+
+    /** Text to be displayed inside the avatar (e.g., initials) */
+    text?: string;
+
+    /** Background color of the avatar */
+    bg?: string;
+
+    /** Custom styles for the avatar container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the text inside the avatar */
+    textStyle?: StyleProp<TextStyle>;
+};

package/src/types/button.type.ts

@@ -0,0 +1,76 @@
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { ButtonVariant, TypographyVariant } from "./common.type";
+
+/**
+ * @see https://rn-nativeflow-docs.onrender.com/docs/components/button
+ */
+export type ButtonProps = PressableProps & {
+    /** Specifies the button style variant (e.g., 'contained', 'outlined') */
+    variant?: ButtonVariant;
+
+    /** Determines button shape - 'round' or 'flat' */
+    type?: 'round' | 'flat';
+
+    /** Whether the button should expand to full width */
+    fullWidth?: boolean;
+
+    /** Horizontal padding inside the button */
+    paddingH?: number;
+
+    /** Vertical padding inside the button */
+    paddingV?: number;
+
+    /** Custom background color */
+    bg?: string;
+
+    /** Border radius of the button */
+    br?: number;
+
+    /** Border width (for outlined buttons) */
+    stroke?: number;
+
+    /** Border color */
+    strokeColor?: string;
+
+    /** Text color */
+    titleColor?: string;
+
+    /** Button text */
+    title?: string;
+
+    /** Font size of the button text */
+    titleFS?: number;
+
+    /** Typography variant (h1, h2, h3, etc.) */
+    titleVariant?: TypographyVariant;
+
+    /** Font family for the button text */
+    titleFF?: string;
+
+    /** Custom size (for round buttons) */
+    size?: number;
+
+    /** Ripple effect color */
+    rippleColor?: string;
+
+    /** Icon element to be displayed inside the button */
+    renderIcon?: JSX.Element;
+
+    /** Left-side icon */
+    renderLeftIcon?: JSX.Element;
+
+    /** Right-side icon */
+    renderRightIcon?: JSX.Element;
+
+    /** Disables the button when `true` */
+    disabled?: boolean;
+
+    /** Custom styles for the button container */
+    buttonContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the text */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Function to execute when button is pressed */
+    onPress?: () => void;
+};

package/src/types/checkbox.type.ts

@@ -0,0 +1,57 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { TypographyVariant } from "./common.type";
+
+export type CheckBoxProps = {
+    /** Defines the shape of the checkbox: 'square' or 'round' */
+    variant?: 'square' | 'round';
+
+    /** Current checked state of the checkbox (controlled component) */
+    isChecked?: boolean;
+
+    /** Default checked state (for uncontrolled component) */
+    defaultValue?: boolean;
+
+    /** Background color when the checkbox is active (checked) */
+    activeBgColor?: string;
+
+    /** Background color when the checkbox is inactive (unchecked) */
+    inActiveBgColor?: string;
+
+    /** Color of the checkmark icon */
+    iconColor?: string;
+
+    /** If true, disables the built-in state management (for controlled usage) */
+    disableBuiltInState?: boolean;
+
+    /** Disables the checkbox, preventing user interaction */
+    disabled?: boolean;
+
+    /** Text label displayed next to the checkbox */
+    text?: string;
+
+    /** Font size of the text label */
+    fs?: number;
+
+    /** Typography variant for text styling */
+    textVariant?: TypographyVariant;
+
+    /** Size of the checkbox (width & height) */
+    size?: number;
+
+    /** Size of the checkmark icon inside the checkbox */
+    iconSize?: number;
+
+    /** Custom styles for the checkbox container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the checkbox itself */
+    checkBoxStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the text label */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Callback function triggered when the checkbox is pressed
+     *  @param e - The new checked state (true/false)
+     */
+    onPress?: (e: boolean) => void;
+};

package/src/types/chip.type.ts

@@ -0,0 +1,55 @@
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export type ChipProps = PressableProps & {
+
+    /** Text displayed inside the chip */
+    title?: string;
+
+    /** Background color of the chip */
+    bg?: string;
+
+    /** Color of the text inside the chip */
+    titleColor?: string;
+
+    /** Font size of the title */
+    fs?: number;
+
+    /** Border radius of the chip */
+    br?: number;
+
+    /** Spacing between elements inside the chip */
+    gap?: number;
+
+    /** Vertical padding inside the chip */
+    paddingV?: number;
+
+    /** Horizontal padding inside the chip */
+    paddingH?: number;
+
+    /** Border width of the chip */
+    stroke?: number;
+
+    /** General color for the chip (could be used for text, border, or background) */
+    color?: string;
+
+    /** Ripple effect color when pressed */
+    rippleColor?: string;
+
+    /** Disables the chip, preventing interaction */
+    disabled?: boolean;
+
+    /** Color of the chip's border */
+    strokeColor?: string;
+
+    /** Icon to render on the left side of the chip */
+    renderLeftIcon?: JSX.Element;
+
+    /** Icon to render on the right side of the chip */
+    renderRightIcon?: JSX.Element;
+
+    /** Custom styles for the chip container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the title text */
+    textStyle?: StyleProp<TextStyle>;
+};

package/src/types/common.type.ts

@@ -0,0 +1,50 @@
+import type { typographySizeTypes } from "../constants/typographySizes";
+
+export type UserInputVariant = 'outlined' | 'standard';
+export type DialogVariant = 'classic' | 'default';
+export type ButtonVariant = 'outlined' | 'contained';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7';
+export type themeModeTypes = 'light' | 'dark';
+
+export type dialogSizesTypes = {
+    xs: number,
+    sm: number,
+    md: number,
+    lg: number,
+    full: number,
+};
+
+type ThemeColorTypes = {
+    primary: string;
+    secondary: string;
+    outline: string;
+    disable: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisable: string;
+    cursorColor: string;
+    placeholderColor: string;
+    iconPrimary: string;
+    iconSecondary: string;
+    iconDisable: string;
+    dividerColor: string;
+    switchColor: string;
+    inputBgColor: string;
+    chipBgColor: string;
+    error: string;
+}
+
+export type ThemeTypes = {
+    isDark: boolean,
+    colors: ThemeColorTypes;
+    typography: {
+        variantSizes: typographySizeTypes;
+    };
+    dialogSizes: dialogSizesTypes;
+}
+
+export type Theme = {
+    light: ThemeTypes;
+    dark: ThemeTypes;
+};

package/src/types/dialog.type.ts

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { DialogVariant, TypographyVariant } from "./common.type";
+
+
+export type DialogRefProps = {
+    open: () => void;
+    close: () => void;
+}
+export type DialogProps = {
+    /** Defines the dialog style variant */
+    variant?: DialogVariant;
+
+    /** Controls the visibility of the dialog */
+    isVisible?: boolean;
+
+    /** Defines the horizontal size of the dialog */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+    /** If true, the dialog takes up the entire screen */
+    fullScreen?: boolean;
+
+    /** Background color of the backdrop */
+    backdropColor?: string;
+
+    /** Duration of the animation in milliseconds */
+    animationDuration?: number;
+
+    /** Callback function triggered when the dialog is closed */
+    onClose?: () => void;
+
+    /** Content to be displayed inside the dialog */
+    children?: ReactNode;
+};
+
+export type DialogBodyProps = {
+
+    /** Enables or disables scrolling within the dialog body */
+    scrollEnable?: boolean;
+
+    /** Custom styles for the dialog body container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Content to be rendered inside the dialog body */
+    children?: ReactNode;
+};
+
+export type DialogDescriptionProps = {
+    /** Font size for the dialog description text */
+    fs?: number;
+
+    /** Variant of the typography to be applied to the text */
+    textVariant?: TypographyVariant;
+
+    /** Style for the container wrapping the dialog description */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Style for the text inside the dialog description */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Content to be rendered inside the dialog description */
+    children?: ReactNode;
+};
+
+export type DialogFootProps = {
+    /** Custom styles for the container wrapping the dialog footer */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Content to be rendered inside the dialog footer */
+    children?: ReactNode;
+};
+
+export type DialogHeadProps = {
+    /** Title text to be displayed in the dialog header */
+    title?: string;
+
+    /** Typography variant for styling the title text */
+    textVariant?: TypographyVariant;
+
+    /** Font size of the title text */
+    fs?: number;
+
+    /** Custom styles for the container wrapping the dialog header */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the title text */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Additional elements or components to be rendered inside the dialog header */
+    children?: React.ReactNode;
+};

package/src/types/grid.type.ts

@@ -0,0 +1,70 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type GridProps = ViewStyle & {
+    /**
+     * If true, the component will act as a grid container.
+     * Similar to CSS flex/grid container.
+     */
+    container?: boolean;
+
+    /**
+     * If true, the component will act as a grid item.
+     * Should be used inside a container.
+     */
+    item?: boolean;
+
+    /**
+     * Defines the spacing (margin) between grid items.
+     */
+    spacing?: number;
+
+    /**
+     * Defines the horizontal spacing (paddingLeft & paddingRight).
+     */
+    spacingH?: number;
+
+    /**
+     * Defines the vertical spacing (paddingTop & paddingBottom).
+     */
+    spacingV?: number;
+
+    /**
+     * Specifies the number of columns inside grid.
+     */
+    size?: number;
+
+    /** 
+        * Number of columns the grid item should take on extra-small screens (mobile phones). 
+    */
+    xs?: number;
+
+    /** 
+     * Number of columns the grid item should take on small screens (tablets). 
+     */
+    sm?: number;
+
+    /** 
+     * Number of columns the grid item should take on medium screens (small laptops). 
+     */
+    md?: number;
+
+    /** 
+     * Number of columns the grid item should take on large screens (desktops). 
+     */
+    lg?: number;
+
+    /** 
+     * Number of columns the grid item should take on extra-large screens (big monitors). 
+     */
+    xl?: number;
+
+    /**
+     * Custom styles for the grid container.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Children components inside the Grid.
+     */
+    children?: React.ReactNode;
+};

package/src/types/index.ts

@@ -0,0 +1,12 @@
+export * from './common.type';
+export * from './button.type';
+export * from './checkbox.type';
+export * from './dialog.type';
+export * from './avatar.type';
+export * from './chip.type';
+export * from './grid.type';
+export * from './menu.type';
+export * from './stack.type';
+export * from './styledComponents.type';
+export * from './switch.type';
+export * from './userInput.type';

package/src/types/menu.type.ts

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
+import type { TypographyVariant } from "./common.type";
+
+
+export type MenuProps = {
+    /** 
+     * Defines the placement of the menu relative to the anchor element. 
+     * Options: 'top' | 'bottom'. 
+     */
+    placement?: 'top' | 'bottom';
+
+    /** 
+     * The element that triggers the menu when interacted with. 
+     */
+    anchor?: JSX.Element;
+
+    /** 
+     * Disables the built-in state management of the menu. 
+     * If true, you must control the open state manually. 
+     */
+    disableBuiltInState?: boolean;
+
+    /** 
+     * Controls whether the menu is open. 
+     * Used when `disableBuiltInState` is true. 
+     */
+    isOpen?: boolean;
+
+    /** 
+     * Callback triggered when the menu is requested to open. 
+     */
+    onRequestOpen?: () => void;
+
+    /** 
+     * Callback triggered when the menu is requested to close. 
+     */
+    onRequestClose?: () => void;
+
+    /** 
+     * Callback triggered when an item is selected. 
+     * Receives the name of the selected item. 
+     */
+    onSelect?: (name: string | undefined) => void;
+
+    /** 
+     * Custom styles for the menu container. 
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the menu. 
+     */
+    children?: ReactNode;
+};
+
+
+export type MenuItemProps = TouchableOpacityProps & {
+    /** 
+     * Vertical padding inside the menu item. 
+     */
+    paddingV?: number;
+
+    /** 
+     * Horizontal padding inside the menu item. 
+     */
+    paddingH?: number;
+
+    /** 
+     * Space between elements inside the menu item. 
+     */
+    gap?: number;
+
+    /** 
+     * The name or identifier of the menu item. 
+     */
+    name?: string;
+
+    /** 
+     * Custom styles for the menu item container. 
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the menu item. 
+     */
+    children?: ReactNode;
+};
+
+export type MenuItemLabelProps = TextStyle & {
+    /** 
+     * Font size of the label text. 
+     */
+    fs?: number;
+
+    /** 
+     * Typography variant for the label text. 
+     */
+    textVariant?: TypographyVariant;
+
+    /** 
+     * Custom styles for the text component. 
+     */
+    style?: StyleProp<TextStyle>;
+
+    /** 
+     * Text to be displayed inside the label. 
+     */
+    children?: ReactNode;
+};