@nexara/nativeflow 0.1.6 → 0.1.8

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,8 +3,11 @@ 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';
 
 export type dialogSizesTypes = {
     xs: number,
@@ -14,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'

package/src/types/link.type.ts

@@ -0,0 +1,15 @@
+import type { TextStyle } from "react-native";
+import type { StyledTextProps } from "./styledComponents.type";
+
+/** Props for the Link component */
+
+export type LinkProps = StyledTextProps & {
+    /** The visible text of the link */
+    title: string;
+
+    /** The URL to be opened when the link is pressed */
+    href: string;
+
+    /** Optional custom styles for the text */
+    style?: TextStyle;
+}

package/src/types/menu.type.ts

@@ -1,6 +1,6 @@
 import type { JSX, ReactNode } from "react";
-import type { StyleProp, TextStyle, TouchableOpacityProps, View, ViewStyle } from "react-native";
-import type { TypographyVariant } from "./common.type";
+import type { StyleProp, TouchableOpacityProps, View, ViewStyle } from "react-native";
+import type { StyledTextProps } from "./styledComponents.type";
 
 
 export type MenuProps = {
@@ -85,7 +85,7 @@ export type MenuItemProps = TouchableOpacityProps & {
     /** 
      * Custom styles for the menu item container. 
      */
-    style?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
 
     /** 
      * Child components to be rendered inside the menu item. 
@@ -93,22 +93,7 @@ export type MenuItemProps = TouchableOpacityProps & {
     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>;
-
+export type MenuItemLabelProps = StyledTextProps & {
     /** 
      * Text to be displayed inside the label. 
      */

package/src/types/radio.type.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import type { StyledTextProps, StyledViewProps } from "./styledComponents.type";
+import type { TouchableOpacityProps } from "react-native";
+import type { TypographyScale } from "./common.type";
+
+/**
+ * Props for the RadioGroup component
+ */
+export type RadioGroupProps = StyledViewProps & {
+  /**
+   * Unique name for the radio group (useful for forms or multiple groups)
+   */
+  name?: string;
+
+  /**
+   * Default selected value (for uncontrolled usage)
+   */
+  defaultValue?: string;
+
+  /**
+   * Current selected value (for controlled usage)
+   */
+  value?: string;
+
+  /**
+   * Children must be Radio components
+   */
+  children: ReactNode;
+
+  /**
+   * Callback when a radio option is selected
+   * @param name - Group name
+   * @param value - Selected value
+   */
+  onSelect?: (name: string, value: string) => void;
+};
+
+
+/**
+ * Props for the RadioItem component
+ */
+export type RadioItemProps = TouchableOpacityProps & {
+  /** Size of the radio circle */
+  size?: number;
+
+  /** Border stroke width of the outer circle */
+  stroke?: number;
+
+  /** Custom color for the radio item (defaults to theme color) */
+  color?: string;
+
+  /** Whether this item is selected */
+  active?: boolean;
+
+  /** Unique name of the radio item (used in groups) */
+  name?: string;
+
+  /** Value associated with this radio item */
+  value: string;
+
+  /** If true, the radio item is disabled */
+  disabled?: boolean;
+
+  /** Optional label text displayed beside the radio item */
+  label?: string;
+
+  /** Font size override for the label */
+  fs?: number;
+
+  /** Typography scale for the label */
+  fScale?: TypographyScale;
+
+  /** Font family for the label */
+  ff?: string;
+
+  /** Additional style props for the label text */
+  labelStyle?: StyledTextProps;
+};

package/src/types/stack.type.ts

@@ -3,11 +3,6 @@ import type { FlexStyle, StyleProp, ViewStyle } from "react-native";
 import type { StyledViewProps } from "./styledComponents.type";
 
 export type HStackProps = StyledViewProps & {
-    /** 
-     * Defines the alignment of children along the main axis. 
-     */
-    justify?: FlexStyle['justifyContent'];
-
     /** 
      * Defines the alignment of children along the cross axis. 
      */
@@ -26,7 +21,7 @@ export type HStackProps = StyledViewProps & {
     /** 
      * Custom styles for the container. 
      */
-    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
 
     /** 
      * Child components to be rendered inside the HStack. 
@@ -36,22 +31,17 @@ export type HStackProps = StyledViewProps & {
 
 export type VStackProps = StyledViewProps & {
     /** 
-     * Child components to be rendered inside the VStack. 
-     */
-    children?: React.ReactNode;
-
-    /** 
-     * Defines the alignment of children along the cross axis. 
-     */
-    align?: FlexStyle['alignItems'];
+    * Space between child components. 
+    */
+    gap?: number;
 
     /** 
-     * Space between child components. 
+     * Child components to be rendered inside the VStack. 
      */
-    gap?: number;
+    children?: React.ReactNode;
 
     /** 
      * Custom styles for the container. 
      */
-    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
 };