@nexara/nativeflow 0.1.7 → 0.1.9

package/src/types/button.type.ts

@@ -1,77 +1,77 @@
-import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
-import type { ButtonVariant, TypographyVariant } from "./common.type";
-import type { JSX } from "react";
-
-/**
- * @see https://rn-nativeflow-docs.onrender.com/docs/components/button
- */
-export type ButtonProps = TouchableOpacityProps & {
-    /** 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;
+import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
+import type { ButtonVariant, TypographyScale } from "./common.type";
+import type { JSX } from "react";
+
+/**
+ * @see https://rn-nativeflow-docs.onrender.com/docs/components/button
+ */
+export type ButtonProps = TouchableOpacityProps & {
+    /** Specifies the button style variant (e.g., 'contained', 'outlined') */
+    variant?: ButtonVariant;
+
+    /** Determines button shape - 'round' or 'flat' */
+    type?: 'round' | 'flat';
+
+    /** Expands the button to occupy the full available width */
+    fullWidth?: boolean;
+
+    /** Horizontal padding inside the button */
+    paddingH?: number;
+
+    /** Vertical padding inside the button */
+    paddingV?: number;
+
+    /** Custom background color (applies to contained buttons) */
+    bg?: string;
+
+    /** Border radius of the button */
+    br?: number;
+
+    /** Border width (used in outlined variant) */
+    stroke?: number;
+
+    /** Border color (used in outlined variant) */
+    strokeColor?: string;
+
+    /** Text (label) color */
+    titleColor?: string;
+
+    /** Text (label) displayed on the button */
+    title?: string;
+
+    /** Font size of the button text */
+    fs?: number;
+
+    /** Typography scale (h1, h2, body, caption, etc.) */
+    fScale?: TypographyScale;
+
+    /** Font family for the button text */
+    ff?: string;
+
+    /** Size of the button (applies when `type="round"`) */
+    size?: number;
+
+    /** Ripple effect color for button press feedback */
+    rippleColor?: string;
+
+    /** Single icon element placed at the center (used mostly in round buttons) */
+    renderIcon?: JSX.Element;
+
+    /** Icon displayed before the button text */
+    renderLeftIcon?: JSX.Element;
+
+    /** Icon displayed after the button text */
+    renderRightIcon?: JSX.Element;
+
+    /** Disables the button when true */
+    disabled?: boolean;
+
+    /** Custom styles for the button container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** 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,57 +1,64 @@
-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;
-};
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { TypographyScale } from "./common.type";
+
+/**
+ * Props for the CheckBox component
+ */
+export type CheckBoxProps = {
+    /** Shape of the checkbox: 'square' or 'round' */
+    variant?: 'square' | 'round';
+
+    /** Current checked state (for 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;
+
+    /** 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 */
+    label?: string;
+
+    /** 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;
+
+    /** Font family for the label text */
+    ff?: string;
+
+    /** Size of the checkbox (width & height) */
+    size?: number;
+
+    /** Size of the checkmark icon inside the checkbox */
+    iconSize?: number;
+
+    /** 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 label text */
+    labelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Callback triggered when the checkbox is pressed.
+     * @param checked - The new checked state (true/false)
+     */
+    onPress?: (checked: boolean) => void;
+};

package/src/types/chip.type.ts

@@ -1,56 +1,65 @@
-import type { JSX } from "react";
-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>;
-};
+import type { JSX } from "react";
+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 */
+    label?: string;
+
+    /** Background color of the chip */
+    bg?: string;
+
+    /** Color of the label text */
+    labelColor?: string;
+
+    /** 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;
+
+    /** 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;
+
+    /** Border color of the chip */
+    strokeColor?: string;
+
+    /** Ripple effect color when pressed */
+    rippleColor?: string;
+
+    /** Disables the chip, preventing interaction */
+    disabled?: boolean;
+
+    /** Indicates the chip is active (for styling purposes) */
+    active?: boolean;
+
+    /** Icon element to render on the left side of the chip */
+    renderLeftIcon?: JSX.Element;
+
+    /** 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 label text */
+    textStyle?: StyleProp<TextStyle>;
+};

package/src/types/common.type.ts

@@ -1,51 +1,109 @@
-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 scalingModeTypes = 'full' | 'partial';
-
-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;
-};
+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 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,
+    sm: number,
+    md: number,
+    lg: number,
+    full: number,
+};
+
+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;
+    sizes: {
+        typography: typographySizeTypes;
+        dialog: dialogSizesTypes;
+    };
+}
+
+export type Theme = {
+    light: ThemeTypes;
+    dark: ThemeTypes;
+};