@nexara/nativeflow 0.1.7 → 0.1.9

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

@@ -1,57 +1,47 @@
-import React from "react";
-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. 
-     */
-    align?: FlexStyle['alignItems'];
-
-    /** 
-     * Determines whether the items should wrap onto multiple lines. 
-     */
-    fWrap?: FlexStyle['flexWrap'];
-
-    /** 
-     * Space between child components. 
-     */
-    gap?: number;
-
-    /** 
-     * Custom styles for the container. 
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /** 
-     * Child components to be rendered inside the HStack. 
-     */
-    children?: React.ReactNode;
-};
-
-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;
-
-    /** 
-     * Custom styles for the container. 
-     */
-    style?: StyleProp<ViewStyle>;
+import React from "react";
+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 cross axis. 
+     */
+    align?: FlexStyle['alignItems'];
+
+    /** 
+     * Determines whether the items should wrap onto multiple lines. 
+     */
+    fWrap?: FlexStyle['flexWrap'];
+
+    /** 
+     * Space between child components. 
+     */
+    gap?: number;
+
+    /** 
+     * Custom styles for the container. 
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the HStack. 
+     */
+    children?: React.ReactNode;
+};
+
+export type VStackProps = StyledViewProps & {
+    /** 
+    * Space between child components. 
+    */
+    gap?: number;
+
+    /** 
+     * Child components to be rendered inside the VStack. 
+     */
+    children?: React.ReactNode;
+
+    /** 
+     * Custom styles for the container. 
+     */
+    containerStyle?: StyleProp<ViewStyle>;
 };

package/src/types/styledComponents.type.ts

@@ -1,118 +1,70 @@
-import type { ColorValue, DimensionValue, StyleProp, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
-import type { TypographyVariant } from "./common.type";
-import React from "react";
-
-export type StyledViewProps = ViewStyle & ViewProps & {
-    /** 
-     * Flex value to control the flex growth, shrink, and basis of the view. 
-     */
-    f?: number;
-
-    /** 
-     * Defines how children are aligned along the main axis. 
-     */
-    justify?: ViewStyle['justifyContent'];
-
-    /** 
-     * Defines how children are aligned along the cross axis. 
-     */
-    align?: ViewStyle['alignItems'];
-
-    /** 
-     * Determines whether the children should wrap if they exceed the container size. 
-     */
-    fWrap?: ViewStyle['flexWrap'];
-
-    /** 
-     * Background color of the view. 
-     */
-    bg?: string;
-
-    /** 
-     * Whether the background color should be derived from the theme. 
-     */
-    themeBg?: boolean;
-
-    /** 
-     * Height of the view, can be a number or a percentage string. 
-     */
-    h?: DimensionValue;
-
-    /** 
-     * Width of the view, can be a number or a percentage string. 
-     */
-    w?: DimensionValue;
-
-    /** 
-     * Child components to be rendered inside StyledView. 
-     */
-    children?: React.ReactNode;
-
-    /** 
-     * Custom styles for the view component. 
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /**  
-    * A ref to access the underlying View component.  
-    * This can be used for measuring layout, animations, or imperative interactions.  
-    */
-    ref?: React.RefObject<View>
-};
-
-export type StyledTextProps = TextProps & TextStyle & {
-    /** 
-     * Defines the typography variant for the text. 
-     */
-    variant?: TypographyVariant;
-
-    /** 
-     * Text content to be rendered inside StyledText. 
-     */
-    children?: React.ReactNode;
-
-    /** 
-     * Custom styles for the text component. 
-     */
-    style?: StyleProp<TextStyle>;
-
-    /** 
-     * Font family for the text. 
-     */
-    ff?: string;
-
-    /** 
-     * Font size of the text. 
-     */
-    fs?: number;
-
-    /** 
-     * Font weight of the text. 
-     */
-    fw?: TextStyle['fontWeight'];
-
-    /** 
-     * Whether the text should be automatically capitalized or adjusted based on the theme. 
-     */
-    tas?: boolean;
-
-    /** 
-     * Color of the text. Accepts standard color values. 
-     */
-    color?: ColorValue;
-
-    /** 
-     * Whether the text color should be derived from the theme. 
-     */
-    themeColor?: boolean;
-
-    /** 
-     * Whether the text should use the primary theme color. 
-     */
-    primary?: boolean;
-
-    /** 
-     * Whether the text should use the secondary theme color. 
-     */
-    secondary?: boolean;
-};
+import type { ColorValue, DimensionValue, StyleProp, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
+import React from "react";
+import type { TypographyScale, TypographyVariant } from "./common.type";
+
+export type StyledViewProps = ViewStyle & ViewProps & {
+    /** Flex value to control the flex growth, shrink, and basis of the view */
+    f?: number;
+
+    /** How children are aligned along the main axis */
+    justify?: ViewStyle['justifyContent'];
+
+    /** How children are aligned along the cross axis */
+    align?: ViewStyle['alignItems'];
+
+    /** Whether children should wrap if they exceed the container size */
+    fWrap?: ViewStyle['flexWrap'];
+
+    /** Background color of the view */
+    bg?: string;
+
+    /** Whether the background color should be derived from the theme */
+    themeBg?: boolean;
+
+    /** Height of the view (number = pixels, string = percentage) */
+    h?: DimensionValue;
+
+    /** Width of the view (number = pixels, string = percentage) */
+    w?: DimensionValue;
+
+    /** Child components to be rendered inside StyledView */
+    children?: React.ReactNode;
+
+    /** Custom styles for the view component */
+    style?: StyleProp<ViewStyle>;
+
+    /** Ref to access the underlying View component */
+    ref?: React.Ref<View>;
+};
+
+export type StyledTextProps = TextProps & TextStyle & {
+    /** Typography scale for font size (e.g., xs, sm, md, lg, xl) */
+    fScale?: TypographyScale;
+
+    /** Typography variant to determine default text color */
+    variant?: TypographyVariant;
+
+    /** Text content to be rendered inside StyledText */
+    children?: React.ReactNode;
+
+    /** Custom styles for the Text component */
+    style?: StyleProp<TextStyle>;
+
+    /** Font family for the text */
+    ff?: string;
+
+    /** Font size of the text (overrides fScale if provided) */
+    fs?: number;
+
+    /** Font weight of the text */
+    fw?: TextStyle['fontWeight'];
+
+    /** Text align center flag (true = center, false/undefined = auto) */
+    tas?: boolean;
+
+    /** Color of the text (overrides variant and themeColor if provided) */
+    color?: ColorValue;
+
+    /** Whether to derive text color from the theme */
+    themeColor?: boolean;
+};

package/src/types/surface.type.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { StyledViewProps } from "./styledComponents.type";
+
+/**
+ * Props for the Surface component
+ */
+export type SurfaceProps = StyledViewProps & {
+    /** Padding inside the surface container (applied uniformly) */
+    padding?: number;
+
+    /** Border radius of the surface container */
+    br?: number;
+
+    /** Style variant of the surface: 'elevated' adds shadow, 'outlined' adds border */
+    variant?: 'elevated' | 'outlined';
+
+    /** Child components to be rendered inside the surface */
+    children?: ReactNode;
+};

package/src/types/switch.type.ts

@@ -1,39 +1,39 @@
-import type { SwitchProps as NativeSwitchProps } from "react-native";
-
-export type SwitchProps = NativeSwitchProps & {
-    /** 
-     * Determines whether the switch is turned on or off.
-     */
-    checked?: boolean;
-
-    /** 
-     * The color of the switch thumb.
-     */
-    color?: string;
-
-    /** 
-     * If true, the switch will be disabled and not interactable.
-     */
-    disabled?: boolean;
-
-    /** 
-     * The size of the switch thumb and track.
-     */
-    size?: number;
-
-    /** 
-     * The color of the track when the switch is in the "on" position.
-     */
-    activeTrackColor?: string;
-
-    /** 
-     * The color of the track when the switch is in the "off" position.
-     */
-    inactiveTrackColor?: string;
-
-    /** 
-     * Callback function triggered when the switch state changes.
-     * @param newValue - The updated boolean value of the switch.
-     */
-    onChange?: (newValue: boolean) => void;
-};
+import type { SwitchProps as NativeSwitchProps } from "react-native";
+
+export type SwitchProps = NativeSwitchProps & {
+    /** 
+     * Determines whether the switch is turned on or off.
+     */
+    checked?: boolean;
+
+    /** 
+     * The color of the switch thumb.
+     */
+    color?: string;
+
+    /** 
+     * If true, the switch will be disabled and not interactable.
+     */
+    disabled?: boolean;
+
+    /** 
+     * The size of the switch thumb and track.
+     */
+    size?: number;
+
+    /** 
+     * The color of the track when the switch is in the "on" position.
+     */
+    activeTrackColor?: string;
+
+    /** 
+     * The color of the track when the switch is in the "off" position.
+     */
+    inactiveTrackColor?: string;
+
+    /** 
+     * Callback function triggered when the switch state changes.
+     * @param newValue - The updated boolean value of the switch.
+     */
+    onChange?: (newValue: boolean) => void;
+};

package/src/types/userInput.type.ts

@@ -1,103 +1,98 @@
-import type { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from "react-native";
-import type { TypographyVariant, UserInputVariant } from "./common.type";
-import type { JSX } from "react";
-
-export type UserInputProps = TextInputProps & {
-    /** 
-     * Defines the input style variant.
-     * - 'outlined': Input has a border around it.
-     * - 'standard': Only the bottom border is visible.
-     * @default 'standard'
-     */
-    variant?: UserInputVariant;
-
-    /** Label text displayed above the input field. */
-    label?: string;
-
-    /** Background color of the input container. */
-    bg?: string;
-
-    /** Border radius of the input field. */
-    br?: number;
-
-    /** Border stroke width (thickness). */
-    stroke?: number;
-
-    /** Color of the label text. */
-    labelColor?: string;
-
-    /**
-     * Defines typography styles for text elements.
-     * - `label`: Typography variant for the label.
-     * - `helperText`: Typography variant for the helper text.
-     */
-    textVariant?: {
-        label?: TypographyVariant;
-        helperText?: TypographyVariant;
-        inputText?: TypographyVariant;
-    };
-
-    /** Color of the text inside the input field. */
-    inputTextColor?: string;
-
-    /** Border color of the input field. */
-    strokeColor?: string;
-
-    /** Cursor color when typing in the input field. */
-    cursorColor?: string;
-
-    /** Color of the placeholder text. */
-    placeholderColor?: string;
-
-    /** Font size of the input text. */
-    inputFs?: number;
-
-    /** Font size of the label text. */
-    labelFs?: number;
-
-    /** Font size of the helper text. */
-    helperTextFS?: number;
-
-    /** Placeholder text displayed when input is empty. */
-    placeholder?: string;
-
-    /** If `true`, the input field is marked as an error (e.g., invalid input). */
-    isError?: boolean;
-
-    /** Helper text displayed below the input field (e.g., validation message). */
-    helperText?: string;
-
-    /** If `true`, the input field is disabled and cannot be interacted with. */
-    disabled?: boolean;
-
-    /** If `true`, the input field allows multiple lines of text. */
-    multiline?: boolean;
-
-    /** Renders a custom left icon inside the input field. */
-    renderLeftIcon?: JSX.Element;
-
-    /** Renders a custom right icon inside the input field. */
-    renderRightIcon?: JSX.Element;
-
-    /**
-     * Custom styles for different parts of the component.
-     * - `mainContainer`: Styles for the outermost wrapper.
-     * - `inputContainer`: Styles for the input field container.
-     * - `input`: Styles for the actual text input.
-     * - `label`: Styles for the label text.
-     * - `helperText`: Styles for the helper text.
-     */
-    styles?: {
-        mainContainer?: StyleProp<ViewStyle>;
-        inputContainer?: StyleProp<ViewStyle>;
-        input?: StyleProp<TextStyle>;
-        label?: StyleProp<TextStyle>;
-        helperText?: StyleProp<TextStyle>;
-    };
-
-    /**  
-        * A ref to access the underlying View component.  
-        * This can be used for measuring layout, animations, or imperative interactions.  
-    */
-    ref?: React.RefObject<TextInput>
-};
+import type { ReactNode } from "react";
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import type { TypographyScale, UserInputVariant } from "./common.type";
+
+export type UserInputProps = TextInputProps & {
+    /** 
+     * Defines the input style variant.
+     * - 'outlined': Input has a border around it.
+     * - 'standard': Only the bottom border is visible.
+     * @default 'standard'
+     */
+    variant?: UserInputVariant;
+
+    /** Label text displayed above the input field. */
+    label?: string;
+
+    /** Background color of the input container. */
+    bg?: string;
+
+    /** Border radius of the input field. */
+    br?: number;
+
+    /** Border stroke width (thickness). */
+    stroke?: number;
+
+    /** Color of the label text. */
+    labelColor?: string;
+
+    /**
+     * Defines typography styles for text elements.
+     * - `label`: Typography variant for the label.
+     * - `helperText`: Typography variant for the helper text.
+     * - `inputText`: Typography variant for the input text.
+     */
+    textScale?: {
+        label?: TypographyScale;
+        helperText?: TypographyScale;
+        inputText?: TypographyScale;
+    };
+
+    /** Color of the text inside the input field. */
+    inputTextColor?: string;
+
+    /** Border color of the input field. */
+    strokeColor?: string;
+
+    /** Cursor color when typing in the input field. */
+    cursorColor?: string;
+
+    /** Color of the placeholder text. */
+    placeholderColor?: string;
+
+    /** Font size of the input text. */
+    inputFs?: number;
+
+    /** Font size of the label text. */
+    labelFs?: number;
+
+    /** Font size of the helper text. */
+    helperTextFS?: number;
+
+    /** Placeholder text displayed when input is empty. */
+    placeholder?: string;
+
+    /** If `true`, the input field is marked as an error (e.g., invalid input). */
+    isError?: boolean;
+
+    /** Helper text displayed below the input field (e.g., validation message). */
+    helperText?: string;
+
+    /** If `true`, the input field is disabled and cannot be interacted with. */
+    disabled?: boolean;
+
+    /** If `true`, the input field allows multiple lines of text. */
+    multiline?: boolean;
+
+    /** Renders a custom left icon inside the input field. */
+    renderLeftIcon?: ReactNode;
+
+    /** Renders a custom right icon inside the input field. */
+    renderRightIcon?: ReactNode;
+
+    /**
+     * Custom styles for different parts of the component.
+     * - `mainContainer`: Styles for the outermost wrapper.
+     * - `inputContainer`: Styles for the input field container.
+     * - `input`: Styles for the actual text input.
+     * - `label`: Styles for the label text.
+     * - `helperText`: Styles for the helper text.
+     */
+    styles?: {
+        mainContainer?: StyleProp<ViewStyle>;
+        inputContainer?: StyleProp<ViewStyle>;
+        input?: StyleProp<TextStyle>;
+        label?: StyleProp<TextStyle>;
+        helperText?: StyleProp<TextStyle>;
+    };
+};