@nexara/nativeflow 0.1.7 → 0.1.8

package/src/themes/LightTheme.ts

@@ -1,96 +1,89 @@
+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",
+const colorPalette = {
+    natural: {
+        0: "#FFFFFF",   // pure white
+        50: "#F9FAFB",  // very light gray (default page background)
+        100: "#F3F4F6", // light gray (elevated surfaces)
+        200: "#E5E7EB", // subtle borders, dividers
+        300: "#D1D5DB", // default borders, secondary text
+        400: "#9CA3AF", // strong borders, muted text
+        500: "#6B7280", // tertiary text
+        600: "#4B5563", // secondary text
+        700: "#374151", // primary text on light backgrounds
+        800: "#1F2937", // strong primary text
+        900: "#111827", // almost black
+    }
+}
 
-//     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
+        palette: colorPalette,
+        brand: {
+            primary: "#034C53",
+            onPrimary: "#FFFFFF",
+            secondary: "#6366F1",
+            onSecondary: "#FFFFFF",
+            tertiary: "#F59E0B",
+            onTertiary: "#111827",
+        },
+        semantic: {
+            success: "#22C55E",
+            onSuccess: "#FFFFFF",
+            warning: "#FACC15",
+            onWarning: "#111827",
+            danger: "#EF4444",
+            onDanger: "#FFFFFF",
+            info: "#3B82F6",
+            onInfo: "#FFFFFF",
+        },
+        background: {
+            default: "#F9FAFB",
+            // default: "#FFFFFF",
+            surface: "#FFFFFF",
+            // elevated: "#F3F4F6",
+            // elevated: "#FAFAFA",
+            elevated: "#FFFFFF",
+            backdrop: "rgba(0,0,0,0.4)",
+        },
+        border: {
+            subtle: "#E5E7EB",
+            default: "#D1D5DB",
+            // default: colorPalette.natural[300],
+            strong: "#9CA3AF",
+            focus: "#F97316",
+        },
+        typography: {
+            primary: "#1A1A1A",
+            secondary: "#4D4D4D",
+            tertiary: "#808080",
+            // disabled: "#B3B3B3",
+            disabled: "#808080",
+            inverse: "#FFFFFF"
+        },
+        states: {
+            hover: "rgba(0, 0, 0, 0.04)",
+            pressed: "rgba(0, 0, 0, 0.08)",
+            focus: '',
+            // disabled: "rgba(0, 0, 0, 0.26)"
+            disabled: "rgb(184, 184, 184)"
+        },
+        elevation: {
+            level0: "none",
+            level1: "0px 1px 3px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)",
+            level2: "0px 2px 4px rgba(0,0,0,0.12), 0px 2px 3px rgba(0,0,0,0.18)",
+            level3: "0px 4px 6px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.12)",
+            level4: "0px 8px 12px rgba(0,0,0,0.16), 0px 4px 8px rgba(0,0,0,0.12)"
+        }
     },
-    dialogSizes
+    sizes: {
+        typography: typographySizes,
+        dialog: dialogSizes
+    }
 }
+LightTheme.colors.states.focus = Color(LightTheme.colors.brand.primary).mix(Color("white"), 0.8).alpha(0.3).rgb().string();
 
 export default LightTheme;

package/src/themes/index.ts

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

package/src/types/avatar.type.ts

@@ -8,9 +8,6 @@ export type AvatarImageProps = {
     /** 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']>;
 

package/src/types/button.type.ts

@@ -1,5 +1,5 @@
 import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
-import type { ButtonVariant, TypographyVariant } from "./common.type";
+import type { ButtonVariant, TypographyScale } from "./common.type";
 import type { JSX } from "react";
 
 /**
@@ -12,7 +12,7 @@ export type ButtonProps = TouchableOpacityProps & {
     /** Determines button shape - 'round' or 'flat' */
     type?: 'round' | 'flat';
 
-    /** Whether the button should expand to full width */
+    /** Expands the button to occupy the full available width */
     fullWidth?: boolean;
 
     /** Horizontal padding inside the button */
@@ -21,56 +21,56 @@ export type ButtonProps = TouchableOpacityProps & {
     /** Vertical padding inside the button */
     paddingV?: number;
 
-    /** Custom background color */
+    /** Custom background color (applies to contained buttons) */
     bg?: string;
 
     /** Border radius of the button */
     br?: number;
 
-    /** Border width (for outlined buttons) */
+    /** Border width (used in outlined variant) */
     stroke?: number;
 
-    /** Border color */
+    /** Border color (used in outlined variant) */
     strokeColor?: string;
 
-    /** Text color */
+    /** Text (label) color */
     titleColor?: string;
 
-    /** Button text */
+    /** Text (label) displayed on the button */
     title?: string;
 
     /** Font size of the button text */
-    titleFS?: number;
+    fs?: number;
 
-    /** Typography variant (h1, h2, h3, etc.) */
-    titleVariant?: TypographyVariant;
+    /** Typography scale (h1, h2, body, caption, etc.) */
+    fScale?: TypographyScale;
 
     /** Font family for the button text */
-    titleFF?: string;
+    ff?: string;
 
-    /** Custom size (for round buttons) */
+    /** Size of the button (applies when `type="round"`) */
     size?: number;
 
-    /** Ripple effect color */
+    /** Ripple effect color for button press feedback */
     rippleColor?: string;
 
-    /** Icon element to be displayed inside the button */
+    /** Single icon element placed at the center (used mostly in round buttons) */
     renderIcon?: JSX.Element;
 
-    /** Left-side icon */
+    /** Icon displayed before the button text */
     renderLeftIcon?: JSX.Element;
 
-    /** Right-side icon */
+    /** Icon displayed after the button text */
     renderRightIcon?: JSX.Element;
 
-    /** Disables the button when `true` */
+    /** Disables the button when true */
     disabled?: boolean;
 
     /** Custom styles for the button container */
-    buttonContainerStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
 
-    /** Custom styles for the text */
-    textStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the title text */
+    titleStyle?: StyleProp<TextStyle>;
 
     /** Function to execute when button is pressed */
     onPress?: () => void;

package/src/types/checkbox.type.ts

@@ -1,11 +1,14 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import type { TypographyVariant } from "./common.type";
+import type { TypographyScale } from "./common.type";
 
+/**
+ * Props for the CheckBox component
+ */
 export type CheckBoxProps = {
-    /** Defines the shape of the checkbox: 'square' or 'round' */
+    /** Shape of the checkbox: 'square' or 'round' */
     variant?: 'square' | 'round';
 
-    /** Current checked state of the checkbox (controlled component) */
+    /** Current checked state (for controlled component) */
     isChecked?: boolean;
 
     /** Default checked state (for uncontrolled component) */
@@ -20,20 +23,23 @@ export type CheckBoxProps = {
     /** Color of the checkmark icon */
     iconColor?: string;
 
-    /** If true, disables the built-in state management (for controlled usage) */
+    /** Disables built-in state handling (for controlled usage) */
     disableBuiltInState?: boolean;
 
     /** Disables the checkbox, preventing user interaction */
     disabled?: boolean;
 
     /** Text label displayed next to the checkbox */
-    text?: string;
+    label?: string;
 
-    /** Font size of the text label */
+    /** Typography scale for the label text (maps to your design system) */
+    fScale?: TypographyScale;
+
+    /** Font size of the label text (overrides fScale if provided) */
     fs?: number;
 
-    /** Typography variant for text styling */
-    textVariant?: TypographyVariant;
+    /** Font family for the label text */
+    ff?: string;
 
     /** Size of the checkbox (width & height) */
     size?: number;
@@ -41,17 +47,18 @@ export type CheckBoxProps = {
     /** Size of the checkmark icon inside the checkbox */
     iconSize?: number;
 
-    /** Custom styles for the checkbox container */
+    /** Custom styles for the outer container of checkbox + label */
     containerStyle?: StyleProp<ViewStyle>;
 
     /** Custom styles for the checkbox itself */
     checkBoxStyle?: StyleProp<ViewStyle>;
 
-    /** Custom styles for the text label */
-    textStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the label text */
+    labelStyle?: StyleProp<TextStyle>;
 
-    /** Callback function triggered when the checkbox is pressed
-     *  @param e - The new checked state (true/false)
+    /**
+     * Callback triggered when the checkbox is pressed.
+     * @param checked - The new checked state (true/false)
      */
-    onPress?: (e: boolean) => void;
-};
+    onPress?: (checked: boolean) => void;
+};

package/src/types/chip.type.ts

@@ -1,20 +1,29 @@
 import type { JSX } from "react";
-import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
-
-export type ChipProps = PressableProps & {
+import type { StyleProp, TextStyle, ViewStyle, TouchableOpacityProps } from "react-native";
+import type { TypographyScale } from "./common.type";
 
+/**
+ * Props for the Chip component
+ */
+export type ChipProps = TouchableOpacityProps & {
     /** Text displayed inside the chip */
-    title?: string;
+    label?: string;
 
     /** Background color of the chip */
     bg?: string;
 
-    /** Color of the text inside the chip */
-    titleColor?: string;
+    /** Color of the label text */
+    labelColor?: string;
 
-    /** Font size of the title */
+    /** Font size of the label text (overrides fScale if provided) */
     fs?: number;
 
+    /** Typography scale of the label text (e.g., xs, sm, md, lg, xl) */
+    fScale?: TypographyScale;
+
+    /** Font family for the label text */
+    ff?: string;
+
     /** Border radius of the chip */
     br?: number;
 
@@ -30,8 +39,8 @@ export type ChipProps = PressableProps & {
     /** Border width of the chip */
     stroke?: number;
 
-    /** General color for the chip (could be used for text, border, or background) */
-    color?: string;
+    /** Border color of the chip */
+    strokeColor?: string;
 
     /** Ripple effect color when pressed */
     rippleColor?: string;
@@ -39,18 +48,18 @@ export type ChipProps = PressableProps & {
     /** Disables the chip, preventing interaction */
     disabled?: boolean;
 
-    /** Color of the chip's border */
-    strokeColor?: string;
+    /** Indicates the chip is active (for styling purposes) */
+    active?: boolean;
 
-    /** Icon to render on the left side of the chip */
+    /** Icon element to render on the left side of the chip */
     renderLeftIcon?: JSX.Element;
 
-    /** Icon to render on the right side of the chip */
+    /** Icon element 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 */
+    /** Custom styles for the label text */
     textStyle?: StyleProp<TextStyle>;
-};
+};

package/src/types/common.type.ts

@@ -3,7 +3,9 @@ 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 TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7';
+export type TypographyScale = 'xxs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type TypographyVariant = keyof ThemeColorTypes['typography'];
 export type themeModeTypes = 'light' | 'dark';
 export type scalingModeTypes = 'full' | 'partial';
 
@@ -15,34 +17,90 @@ export type dialogSizesTypes = {
     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;
+type ColorPalette = {
+    natural: {
+        0: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    }
 }
+type ThemeColorTypes = {
+
+    palette: ColorPalette;
+
+    brand: {
+        primary: string;     // Main brand color (buttons, highlights)
+        onPrimary: string;   // Text/icons on primary background
+        secondary: string;   // Secondary brand color (accents)
+        onSecondary: string; // Text/icons on secondary background
+        tertiary: string;    // Optional brand accent (extra highlight)
+        onTertiary: string;  // Text/icons on tertiary background
+    };
+
+    semantic: {
+        success: string;   // Success indicators (green states)
+        onSuccess: string; // Text/icons on success background
+        warning: string;   // Warning indicators (yellow states)
+        onWarning: string; // Text/icons on warning background
+        danger: string;    // Error/destructive indicators (red states)
+        onDanger: string;  // Text/icons on danger background
+        info: string;      // Informational highlights (blue states)
+        onInfo: string;    // Text/icons on info background
+    };
+
+    background: {
+        default: string;   // App/page root background
+        surface: string;   // Surfaces like cards, sections
+        elevated: string;  // Floating UI (menus, dialogs)
+        backdrop: string;  // Dimmed overlay behind modals
+    };
+
+    border: {
+        subtle: string; // For dividers, separators, very low-emphasis outlines like Card dividers.
+        default: string; // The “go-to” border color for most components. like Button borders, Input fields when idle, Container outlines.
+        strong: string; // High-contrast, visible borders that must stand out, Modals or cards against busy backgrounds.
+        focus: string; //Special border color for focus rings or interactive states, Input fields when focused.
+    };
+
+    typography: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+        inverse: string; // for text over dark backgrounds
+    };
+
+    states: {
+        hover: string;
+        pressed: string;
+        focus: string;
+        disabled: string;
+    };
+
+    elevation?: {
+        level0: string; // shadow for flat
+        level1: string; // small cards
+        level2: string; // dialogs
+        level3: string; // modals
+        level4: string; // modals
+    };
+};
 
 export type ThemeTypes = {
     isDark: boolean,
     colors: ThemeColorTypes;
-    typography: {
-        variantSizes: typographySizeTypes;
+    sizes: {
+        typography: typographySizeTypes;
+        dialog: dialogSizesTypes;
     };
-    dialogSizes: dialogSizesTypes;
 }
 
 export type Theme = {

package/src/types/dialog.type.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import type { DialogVariant, TypographyVariant } from "./common.type";
+import type { DialogVariant, TypographyScale } from "./common.type";
+import type { StyledTextProps, StyledViewProps } from "./styledComponents.type";
 
 
 export type DialogRefProps = {
@@ -42,13 +43,10 @@ export type DialogBodyProps = {
     children?: ReactNode;
 };
 
-export type DialogDescriptionProps = {
+export type DialogDescriptionProps = StyledTextProps & {
 
     /** Variant of the typography to be applied to the text */
-    textVariant?: TypographyVariant;
-
-    /** Font size for the dialog description text */
-    fs?: number;
+    fScale?: TypographyScale;
 
     /** Style for the container wrapping the dialog description */
     containerStyle?: StyleProp<ViewStyle>;
@@ -60,7 +58,7 @@ export type DialogDescriptionProps = {
     children?: ReactNode;
 };
 
-export type DialogFootProps = {
+export type DialogFootProps = StyledViewProps & {
     /** Custom styles for the container wrapping the dialog footer */
     containerStyle?: StyleProp<ViewStyle>;
 
@@ -69,21 +67,24 @@ export type DialogFootProps = {
 };
 
 export type DialogHeadProps = {
-    /** Title text to be displayed in the dialog header */
+    /** Title text to be displayed in the dialog header. If not provided, `children` will be rendered. */
     title?: string;
 
-    /** Typography variant for styling the title text */
-    textVariant?: TypographyVariant;
+    /** Typography scale for the title text (e.g., xs, sm, md, lg, xl) */
+    fScale?: TypographyScale;
 
-    /** Font size of the title text */
+    /** Font size of the title text (overrides fScale if provided) */
     fs?: number;
 
+    /** Font family for the title text */
+    ff?: string;
+
     /** Custom styles for the container wrapping the dialog header */
     containerStyle?: StyleProp<ViewStyle>;
 
     /** Custom styles for the title text */
-    textStyle?: StyleProp<TextStyle>;
+    titleStyle?: StyleProp<TextStyle>;
 
     /** Additional elements or components to be rendered inside the dialog header */
-    children?: React.ReactNode;
-};
+    children?: ReactNode;
+};

package/src/types/divider.type.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+  /** Props for the Divider component */
+
+export type DividerProps = {
+    
+    /** Thickness of the divider line */
+    thickness?: number;
+
+    /** Custom styles to apply to the divider */
+    style?: StyleProp<ViewStyle>;
+
+    /** Color of the divider line; defaults to theme's subtle border color if not provided */
+    color?: string;
+}

package/src/types/grid.type.ts

@@ -1,6 +1,7 @@
 import type { StyleProp, ViewStyle } from "react-native";
+import type { StyledViewProps } from "./styledComponents.type";
 
-export type GridProps = ViewStyle & {
+export type GridProps = StyledViewProps & {
     /**
      * If true, the component will act as a grid container.
      * Similar to CSS flex/grid container.

package/src/types/index.ts

@@ -10,4 +10,8 @@ export * from './stack.type';
 export * from './styledComponents.type';
 export * from './switch.type';
 export * from './userInput.type';
-export * from './progress.type'
+export * from './progress.type'
+export * from './surface.type'
+export * from './radio.type'
+export * from './divider.type'
+export * from './link.type'